如何解决React中用于webForm的单个onChange处理程序
dd(auth()->validate(['username'=>'testtest','password'=>'testtest']));
我有完整的输入表单,像这样...
如何创建onChangeHandler函数,以便可以更新所有值。
我该如何管理[even.target.name]以及如何使用setState进行分配,以便其余数据不会受到影响。
解决方法
首先,您需要为每个输入命名,data-parent
如果嵌套了该属性
名称必须是要更改状态的属性的键
还有data-parent
attr,它将是嵌套组件的名称
请检查下面的示例
https://codesandbox.io/s/react-input-example-forked-tu7hp?file=/src/index.js
class MyComponent extends React.Component {
state = {
data: {
name: { fname: "sinni",lname: "jain" },address: { city: "jodhpur",state: "rajasthan" },sex: "male"
}
};
changeHandler = (e) => {
const parent = e.target.dataset.parent;
const name = e.target.name;
const newValue = e.target.value;
this.setState((prevState) => {
if (parent) {
return {
data: {
...prevState.data,[parent]: {
...prevState.data[parent],[name]: newValue
}
}
};
} else {
return {
data: {
...prevState.data,[name]: newValue
}
};
}
});
};
render() {
const { data } = this.state;
return (
<div>
<input
type="text"
name="fname"
data-parent="name"
value={this.state.data.name.fname}
onChange={this.changeHandler}
/>
<input
type="text"
name="lname"
data-parent="name"
value={this.state.data.name.lname}
onChange={this.changeHandler}
/>
<input
type="text"
name="city"
data-parent="address"
value={this.state.data.address.city}
onChange={this.changeHandler}
/>
</div>
);
}
}
,
<form>
<p> first name </p>
//when you reference state in class component,should be this.state
<input type='text' value={this.data.name.fname} onChange={(event) => changeHandler(event,"firstName")} />
<p> last name </p>
<input type='text' value={this.data.name.lname} onChange={(event) => changeHandler(event,"lastName")} />
{//so on whole form }
{ and sex and status are select box }
</form>
这是changeHandler:
changeHandler = (event,firstOrLast) => {
if(firstOrLast === "firstName") {
//you can access onChange event through event.target.value
this.setState({data{name: {...this.state.data.name,fname: event.target.value,}})}
}
else {
this.setState(data{{name: {...this.state.data.name,lname: event.target.value}})}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。