javascript - 来自表单输入的 Reactjs setState 问题

Question

我是 React 世界的新手，我无法从表单输入字段中正确更改状态。我正在构建一个将保存在数据库中的员工文件。我在组件状态下创建了一个配置文件，并从输入字段中获取用户数据。但是，在 OnChange 事件处理函数中，薪水和头条字段不会发生变化。 Candidate是employee的对象表示

this.state = {
  candidate: {
    account: {
      firstName: '',
      lastName: '',
      email: '',
      phone: '',
    },
    salary: '',
    headline: '',
    topSkills: [{
        experience1: '',
        title1: ''
      }, {
        experience2: '',
        title2: ''
      }, {
        experience3: '',
        title3: ''
      },
    ],
  }
}

onChangefunction

handleChange(e) {
  const name = e.target.name;
  const value = e.target.value;
  let copyState = Object.assign({},
    this.state.candidate);
  copyState.account[name] = value;
  copyState.topSkills[name] = value;
  copyState.salary = value;
  copyState.headline = value;
  this.setState(copyState);
}

salary 和 headline 中的输入字段不接受用户输入

<input
  name="salary"
  type="number"
  value={this.state.candidate.salary|| ''}
  onChange={this.handleChange}
/>

任何人都可以向我提供帮助并建议如何在 onChange 函数上构造 setState 吗？

Answer 1

您可以简单地处理输入的变化:

state = {
    candidate: {
        account: {
            firstName: '',
            lastName: '',
            email: '',
            phone: '', 
        },
        salary: '',
        headline: '', 
        topSkills: [ 
        {
            experience1: '', 
            title1: ''
        }, 
        {
            experience2: '', 
            title2: ''
        },
        {
            experience3: '', 
            title3: ''
        },
       ],
     }
 }

handleChange = (e) => {
    this.setState( { candidate: { [e.target.name]: e.target.value }})
}