javascript - 为什么当状态在 ReactJs 上有对象时我的 onChange 不起作用

Question

我尝试使用 ES6 的 ReactJS 构建一个应用程序

class MyApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      employee:{
      name: 'hello',
      birthday: ''
      },
      price: ''
    }
    this.handleValueChange = this.handleValueChange.bind(this);
  }
  handleValueChange(event){
    valueName = event.target.name
    this.setState({[valueName]: event.target.value});
  };
  render(){
    return(
    <form>
      <input type="text" placeholder="name" value={this.state.employee.name} onChange={this.handleValueChange} name="name"/>
      <input type="text" placeholder="name" value={this.state.price} onChange={this.handleValueChange} name="price"/>
    </form>
    )
  }
}

作为我的代码，我使用 handleVauleChange在onChange事件来改变输入html标签的默认状态。如果this.state中的数据是对象(如员工)，handleVauleChange函数不起作用，但数据就像价格一样，它会正常工作。

为什么会发生这种情况？

Answer 1

名称输入的 setState 应该是这样的...

this.setState({
    employee: {
        [valueName]: event.target.value
    }
});

不确定您需要的状态结构有多动态，但对于一层深层结构，您可以执行类似的操作...

handleValueChange(event) {
    const valueName = event.target.name;
    const parent = valueName.indexOf('.') !== -1 ? valueName.split('.')[0] : false;
    if (parent) {
        this.setState({
            [parent]: {
                [valueName]: event.target.value
            }
        });
    } else {
        this.setState({
            [valueName]: event.target.value
        });
    }
}

在您的输入字段上...

<input 
    type="text" 
    placeholder="name" 
    name="employee.name"
    value={this.state.employee.name} 
    onChange={this.handleValueChange} />
<input 
    type="text" 
    placeholder="price" 
    name="price"
    value={this.state.price} 
    onChange={this.handleValueChange} />