1

我使用 TSX 文件在 React JS 中加载文本框，如下所示：

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

现在当我加载这个文件时，我们不能在文本框中写任何东西。

所以有人可以帮助我吗？

4

1 回答 1

2

你不能写任何东西，因为你已经创建了一个受控组件，这意味着输入的值将始终是valueprop 评估的任何值 - 在这种情况下employees[0].name或"".

通过一些小的调整，您可以使其工作，或者通过使其成为具有更新值的事件侦听器的受控组件，或者通过使其成为不受控制的组件。

在受控组件中，表单数据由 React 组件处理。另一种方法是不受控制的组件，其中表单数据由 DOM 本身处理。

更多信息在这里和这里。

选项 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 - 不受控制的组件

您只需稍作修改即可使您的输入成为不受控制的组件。只需替换value为defaultValue：

<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-14T13:06:02.440 回答