为什么当状态在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的默认状态tag.If数据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} />

Answer 2

创建了jsbin：

http://jsbin.com/vopixexixe/edit?js，控制台，输出#J：L14

在名称输入框中，输入来自this.state.employee.name的设置输入值，即“ hello”，但将设置更改后的值更改为this.state.name

但如果是价格，则您可以从this.state.price设置输入值并更新为this.state.price，这样就体现了价值。

Answer 3

在“名称”的情况下，您编辑state.name，并且您想编辑state.employee.name，我认为