javascript - 使用 Typescript 在 React JS 中禁用文本框

Question

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

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

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

所以有人可以帮助我吗？

Answer 1

你不能写任何东西，因为你已经创建了一个受控组件，这意味着输入的值将始终是 value 中的任何值。 prop 的计算结果为 - 在本例中为 employees[0].name或 "" .

通过一些小的调整，您可以使它工作，要么将其设置为具有更新值的事件监听器的受控组件，要么将其设置为不受控组件。

In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

更多信息 here和 here .

---

选项 1 - 受控组件(推荐)

要制作受控组件，需要添加onChange事件监听器并更新您传递给 value 的变量.从你的问题中不清楚什么 employees是;如果它是状态或 Prop 变量或其他东西。

假设它是一个状态变量，你可以这样做:

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' ... ，如果您愿意的话。