为什么当国家对ReactJs

对象我的onChange不工作我试图通过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> 
    ) 
    } 
}

建立一个应用程序使用ReactJS作为我的代码，我在onChange事件中使用handleVauleChange改变输入的默认状态html标签。如果this.state中的数据是对象（如员工），则handleVauleChange函数将不起作用，但数据类似于价格，它将正常工作。

为什么发生了？

来源

2016-11-19 Champer Wu

您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} />

来源

2016-11-19 19:38:57 jpdelatorre

我厌倦了使用你的代码，但employee.name是不受控制的 –

你可以澄清你的意思是什么employee.name是不受控制的。 'handleValueChange'方法不需要在'setState'中定义employee关键字。指定输入名称属性时，您只需要使用点符号。 – jpdelatorre

我用你的代码和控制台告诉我'警告：MyAppForm正在改变一个受控制的文本类型的不受控制的输入。输入元素不应从非受控状态切换为受控状态（反之亦然）。决定在组件的生命周期中使用受控或不受控制的输入元素。' –

在“名”的情况下编辑state.name，你要编辑state.employee.name我觉得

来源

2016-11-19 19:21:20 marcinrek

你是什么意思？ –

您有一个状态对象，具有'员工'，'生日'和'价格'属性。但'雇员'特性也是一个名为'名称'的属性 - 这就是你想要修改的东西。当你改变'价格'的价值这项工作，但当你想改变名称，你应该改变'employee.name'的价值，而不是'名称'的价值。 – marcinrek

创建jsbin：

http://jsbin.com/vopixexixe/edit?js,console,output#J:L14

在名称输入从this.state.employee.name您设定的输入值，这是“你好”，但是，改变你的设置更改值this.state .name

但是在价格的情况下，您将设置输入值从this.state.price更新为this.state.price，因此值反映。

来源

2016-11-19 21:32:33 vijay

可以让输入值被控制吗？ –

现在工作正常！ thx，但浏览器控制台告诉我'警告：MyAppForm正在改变一个受控制的文本类型的不受控制的输入。输入元素不应从非受控状态切换为受控状态（反之亦然）。决定在组件的使用期限内使用受控或非受控输入元素 –

为什么当国家对ReactJs

回答

相关问题