文本框來了禁用的陣營JS使用腳本類型

我已經使用TSX文件中加載文本框中陣營JS如下：文本框來了禁用的陣營JS使用腳本類型

<input type={'text'} value={employees.length > 0 ? employees[0].name : ""} id= 
{'Name'} label={'Name'} name={'Name'} htmlFor={'Name'} />

現在，當我打開這個文件，那麼我們不能寫在文本框中輸入任何東西。

所以，任何人都可以幫我嗎？在這種情況下employees[0].name或"" -

來源

2017-09-14 IPS

，因爲你已經創建了一個控制組件，這意味着輸入的值將始終是無論value道具計算結果爲不能寫任何東西。

有了一些小的調整就可以，或者通過使其與一個事件監聽器，更新值的管理組件，或使它成爲一個失控的成分，使這項工作。

在受控組件中，表單數據由React組件處理。另一種方法是不受控制的組件，其中，表格數據由DOM本身處理。

更多信息here和here。

選項1 - 控制組件（推薦）

要進行控制組件，您需要添加onChange事件偵聽器，並有更新，你進入value變量。這不是從你的問題是什麼employees是明確的;如果它是一個狀態或道具變量或別的東西。

假設它是一個狀態變量，你可以這樣做：

handleChange = (e) => { 
    let arr = this.state.employees.slice(); 
    arr[0].name = e.target.value; 
    this.setState({employees: arr}); 
} 

render() { 
    let {employees} = this.state; 
    return (
    <input type={'text'} onChange={this.handleChange} value={employees.length > 0 ? employees[0].name : ""} id={'Name'} label={'Name'} name={'Name'} htmlFor={'Name'} /> 
); 
}

選擇2 - 不受控制的成分

你只需要稍作修改，讓您輸入的不受控制的組成部分。只需用defaultValue替換value：

<input type={'text'} defaultValue={employees.length > 0 ? employees[0].name : ""} id={'Name'} label={'Name'} name={'Name'} htmlFor={'Name'} />

作爲一個側面說明，你並不需要包裝字符串文字在括號中。因此，而不是<input type={'text'} ...你可以做<input type='text' ...，如果你喜歡。

來源

2017-09-14 13:06:02 Chris

文本框來了禁用的陣營JS使用腳本類型

回答

相關問題