文本框来了禁用的阵营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使用脚本类型

回答

相关问题