我正在学习反应和反应形式,并试图创建一个动态和可扩展的形式。我已经设置了具有类型
的状态,并基于该类型,显示相应的输入类型(因此它可以是文本、文本区域、单选、选择、日期或复选框)。我试图写一个函数,这样它将动态设置基于类型
的表单输入,但我卡住了试图实现相同的变化。
所以如果type==选择
,event.target.value
或type===复选框
,event.target.checked
等等。
请检查此工作代码沙盒。
看看这个完整的代码片段:-
import React from "react";
import "./styles.css";
class App extends React.Component {
state = {
Forms: [
{ name: "select", type: "select", options: ["a", "b", "c"] },
{ name: "Radio", type: "radio", options: ["a", "b", "c"] },
{ name: "Date", type: "date", value: "2018-07-22" },
{ name: "Text Input", type: "text", value: "text input" },
{
name: "Checkbox",
type: "checkbox",
options: ["a", "b", "c"],
value: false
},
{ name: "Textarea", type: "textarea", value: "text area" }
]
};
handleFormStateChange = (event, idx) => {
const target = event.target;
const form = [...this.state.forms];
form[idx].value = target.type === "select" ? target.value : "";
form[idx].value = target.type === "radio" ? target.value : "";
form[idx].value =
target.type === "date" ||
target.type === "text" ||
target.type === "textarea"
? target.value
: "";
form[idx].value = target.type === "checkbox" ? target.checked : "";
this.setState({
form
});
};
getField = field => {
switch (field.type) {
case "date":
case "text":
case "textarea":
return <input type={field.type} value={field.value} />;
case "select":
return (
<select name={field}>
{field.options.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
;
</select>
);
case "radio":
case "checkbox":
return (
<div>
{field.options.map(option => (
<label>
{option}:
<input
key={option}
type={field.type}
name={option}
value={option}
/>
</label>
))}
</div>
);
default:
return <div>Unknown form field</div>;
}
};
renderForm = () => {
return this.state.Forms.map((field, index) => (
<label key={index}>
{field.name}
{this.getField(field)}
</label>
));
};
render() {
return <div>{this.renderForm()}</div>;
}
}
export default App;
我仍在努力学习并花时间与ReactJS在一起,因此任何帮助都将不胜感激。非常感谢。:)
const handleChange= (e)=> {
let v = e.target.type === "checkbox" ? e.target.checked : e.target.value;
setState(
{
...state,
[e.target.name]: v
}
);
};
只是检查它是一个复选框或否。另一种输入类型具有value属性,但复选框具有选中的属性。不要忘记为您的输入设置一个name
prop。
这应该行得通。
handleFormStateChange = (event, idx) => {
const target = event.target;
const form = [...this.state.Forms];
form[idx].value = "";
form[idx].value =
target.type === "select-one" ? target.value : form[idx].value;
form[idx].value = target.type === "radio" ? target.value : form[idx].value;
form[idx].value =
target.type === "date" ||
target.type === "text" ||
target.type === "textarea"
? target.value
: form[idx].value;
if (target.type === "checkbox") {
if(!form[idx].selectedValues) {
form[idx].selectedValues = {};
}
form[idx].selectedValues[target.value] = target.checked;
}
this.setState({
form
});
};
getField = (field, index) => {
switch (field.type) {
case "date":
case "text":
case "textarea":
return (
<input
type={field.type}
value={field.value}
onChange={event => {
this.handleFormStateChange(event, index);
}}
/>
);
case "select":
return (
<select
name={field}
value={field.value}
onChange={event => {
this.handleFormStateChange(event, index);
}}
>
{field.options.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
;
</select>
);
case "radio":
case "checkbox":
return (
<div>
{field.options.map(option => (
<label key={field.type + "op" + option}>
{option}:
<input
onChange={event => {
this.handleFormStateChange(event, index);
}}
key={option}
type={field.type}
name={option}
value={option}
/>
</label>
))}
</div>
);
default:
return <div>Unknown form field</div>;
}
};
renderForm = () => {
return this.state.Forms.map((field, index) => (
<label key={index}>
{field.name}
{this.getField(field, index)}
</label>
));
};
首先,复选框
类型可以有多个值被选中,所以我们需要对里面的每个选项都有一个状态。所以在表单对象上引入了selectedVales对象。
第二件要注意的事情是,当定义了select
元素时,其事件.target.type
是select one
,而不是select
。
我们需要注意的最后一件事是,在条件被伪造的地方重新使用form[idx]. value
的原始值,而不是使用空字符串。对其他部分使用空字符串将覆盖先前设置的值。
我想在ReactJS onChange中执行一个附加函数,在input type text字段中,那么render函数是:
我有一个页面,我从服务器上获取数据,并为受控输入设置状态值。(例如,我有一个值为的输入,我从服务器上获取名称(例如Dave)并将其设置为name,因此输入值为Dave。它可以工作,但我遇到了对象数组的问题。) 所以这就是状态 这就是我如何使用 但这会导致此错误:
问题内容: 在laravel中,我们可以通过获得输入值。我尝试通过这样做来更改值。但是然后,我得到了错误消息“” 。 我们是否可以更改输入值,以便在以后调用时获得新的修改后的值? 谢谢。 问题答案: 您可以用来替换单个项目。 或用于替换整个输入数组。 这是文档的链接
问题内容: 在事件上使用jquery时,仅当输入失去焦点时才会触发事件 就我而言,我需要在输入值更改后立即调用该服务(检查值是否有效)。我该怎么做? 问题答案: 更新为澄清和示例 方法1。事件 在现代浏览器中使用事件。当用户在任何时候将值从一个值更改为另一个值时,都将在用户键入文本字段,粘贴,撤消操作时触发此事件。 在jQuery中这样做 从jQuery 1.7开始,替换为: 方法2。事件 对于较
我正在尝试用Angular构建一个简单的计算器,如果我想的话,我可以覆盖总数。我有这部分的工作,但当我回去输入一个数字在一个或两个领域的总数没有在该领域的更新。 这是我的jsfiddlehttp://jsfiddle.net/YUza7/2/ 形式 javascript
问题内容: 我需要使用JSlider实时获取输入,这意味着它将在不按任何按钮的情况下返回输入。我有滑块的这段代码: 甚至有可能这样做吗?我以为可以使用actionListener,但是没有成功。 问题答案: 例如,可以使用ChangeListener