React js，如何在输入更改时更新状态对象值？ [复制]答案

【问题标题】：React js, how to update state object values on input change? [duplicate]React js，如何在输入更改时更新状态对象值？ [复制]
【发布时间】：2020-07-18 11:53:33
【问题描述】：

在 React JS 中，我试图创建一个函数，用输入的值更新输入字段的 onChange 事件的状态。

状态模型必须保持这样，因为我必须这样发布它（以匹配 API 结构等）。

但我不知道如何获取每条记录的状态“答案”部分。

// State --------------------------------------
state = {
    values: [
      //1
      {
        section: "a",
        answers:
        {
            1a: 1,
            1b: 2,
            1c: 3,
            1d: 4,
            1e: 5
        }   
      },
      //2
      {
        section: "b",
        answers:
        {
            2a: 1,
            2b: 2,
            2c: 3,
            2d: 4,
            2e: 5,
            2f: 6,
            2g: 7,
            2h: 7
        }   
      }
   ]
}

// Set value ----------------------------------
  setValue = (key, val) => {
    this.setState((state) => ({ 
      values: {
        ...state.values,
        [key]: val
      }
    }));
  };

// Handle input change ------------------------
  handleChange = key => e => {
    this.setValue(key, e.target.value)
  };

//Usage ---------------------------------------
<input
   id="input1"
   type="number" 
   onChange={handleChange(values.1a)}
   defaultValue={values.1a}
/>
<input
   id="input2"
   type="number" 
   onChange={handleChange(values.2c)}
   defaultValue={values.2c}
/>

【问题讨论】：

目前只是创建一个新的状态键和值，但需要更新现有状态！

标签： javascript reactjs state

【解决方案1】：

你可以试试下面的代码：

// Example class component
class Thingy extends React.Component {
   constructor(props) {
   super(props)
   this.state = {
       values: [
      //1
      {
        section: "a",
        answers:
        {
            a1:1,
            b1:2,
            c1:3,
            d1:4,
            e1:5
        }   
      },
      //2
      {
        section: "b",
        answers:
        {
            a2:1,
            b2:2,
            c2:3,
            d2:4,
            e2:5,
            f2:6,
            g2:7,
            h2:7
        }   
      }
   ]
    }
  }
   
  
  setValue = (Key, val) => {
    
    let output = this.state.values.map(value=>{
       if (Key in value.answers) 
       {
          let tempValue = {
              ...value,
              answers:
              {
                 ...value.answers,
                 [Key] : Number(val)
              }
          }
          return tempValue
       }
       else
       {
          return value
       }
    })
    
    this.setState({
       values:output
    })
  }; 
  
  handleChange =(e, key) => {
    this.setValue(key, e.target.value)
  }
  
  getDefaultValue=(Key)=>{
    let output
    this.state.values.forEach(value=>{
       if (Key in value.answers) 
       {
          output = value.answers[Key]
       }
    })
    return output
  }
  
  render() {
   
    return (
      <div>   
         <input id="input1" type="number" onChange={(e)=>this.handleChange(e,"a1")} value={this.getDefaultValue("a1")} />
         <input id="input2" type="number" onChange={(e)=>this.handleChange(e,"c2")} value={this.getDefaultValue("c2")} /> 
      </div>
    )
  }
}

// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：