爲什麼當國家對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

回答

相關問題