[英]Use setState on a object of state on ReactJS
我正在使用 ReactJS 并且我需要更改值的状态但是 value 属性以这种方式处于状态:
this.state = {
form:{
name:{
value:''
}
}
}
我在表单上以不同的方式尝试过,例如:
<TextInput
name='form.name.value'
value={this.state.form.name.value}
onChange={value => this.onChange('name', value)}
/>
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value})
}
但永远不会改变 state 的值。
我怎样才能做到这一点? 谢谢!!!!!!
您的onChange
函数应更改为
onChange = (e) => {
this.setState({ form: {...this.state.form, [e.target.name]: e.target.value}})
}
编辑:我能够成功运行以下代码
class App extends React.Component { state = { form: { test: "" } } onChange = (e) => { this.setState({ form: { ...this.state.form, [e.nativeEvent.target.name]: e.target.value, } }) } render() { return <div> <TextInput name='test' value={this.state.form.test} onChange={this.onChange} /> <br/><br/> The State : {JSON.stringify(this.state)} </div>; } } const TextInput = (props) => { return <input type="text" {...props}/>; } ReactDOM.render( <App />, document.getElementById('container') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>
编辑:根据您的新结构,我进行了更改
class App extends React.Component { state = { form: { test: { value: "", type: "text" } } } onChange = (e) => { this.setState({ form: { ...this.state.form, [e.nativeEvent.target.name]: { ...this.state.form[e.nativeEvent.target.name], value: e.nativeEvent.target.value }, } }) } render() { return <div> <CustomInput name='test' value={this.state.form.test.value} onChange={this.onChange} /> <br/><br/> The State : {JSON.stringify(this.state)} </div>; } } const CustomInput = (props) => { return <input {...props}/>; } ReactDOM.render( <App />, document.getElementById('container') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"></div>
您使用输入字段名称的方式不正确。在setState
它被视为字符串而不是object.key
。
onChange= (e) => {
let inputName = e.target.name;
let inputValue = e.target.value;
let updatedFormState = Object.assign({}, this.state);
updatedFormState.form[inputName].value = inputValue;
this.setState(updatedFormState);
}
为了为嵌套对象设置状态,您可以遵循以下方法,因为我认为 setState 不处理嵌套更新。
let form = {...this.state.form}
let name = [e.target.name];
form.name = e.target.value;
this.setState({form});
这个想法是创建一个虚拟对象对其执行操作,然后用更新的对象替换组件的状态
我不知道你的情况,但我认为你做错了练习。 解决你的问题:
<TextInput
name="form.name.value"
value={this.state.form.name.value}
onChange={(a, b) => this.handleTextChange(a, b)}
/>
现在handleTextChange
喜欢
handleTextChange(name, value) {
const arr = name.split(".");
const obj = {
[arr[2]]: value
};
const nameObj = {
[arr[1]]: { ...obj }
};
console.log("fomr", nameObj);
this.setState({ form: nameObj });
}
考虑你 customComponent
const TextInput = props => {
return (
<input
name={props.name}
onChange={e => props.onChange(e.target.name, e.target.value)}
/>
);
};
CodeSandbox工作示例
您需要使用 es6 进行解构:
我在这里创建了一个工作副本: CodePen InputForm
var sp = {...this.state.form};
sp.name.value = event.target.value;
this.setState({sp})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.