在 ReactJS 上的狀態對象上使用 setState

Question

我正在使用 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 的值。

我怎樣才能做到這一點？ 謝謝！！！！！！

Answer 1

您的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>

Answer 2

您使用輸入字段名稱的方式不正確。在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);
}

Answer 3

為了為嵌套對象設置狀態，您可以遵循以下方法，因為我認為 setState 不處理嵌套更新。

let form = {...this.state.form}
let name = [e.target.name];
form.name = e.target.value;
this.setState({form});

這個想法是創建一個虛擬對象對其執行操作，然后用更新的對象替換組件的狀態

Answer 4

我不知道你的情況，但我認為你做錯了練習。 解決你的問題：

<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工作示例

Answer 5

您需要使用 es6 進行解構：

我在這里創建了一個工作副本： CodePen InputForm

var sp = {...this.state.form};
sp.name.value = event.target.value;

this.setState({sp})