当输入框的值被清空时，onChange事件不起作用。

Question

我在处理输入值的变化时遇到了问题。这是我的React代码，onChange函数可以工作，但当我清除默认值时，直到进行另一次更改之前它才不打印任何内容。

<Form.Control
  type="text"
  placeholder="name"
  defaultValue={this.state.name}
  onChange={e=>console.log(e.target.value)}
/>

我只是为了测试写了 console.log。

- mostafa

---

console.log 这里不觉得有个打字错误吗？ - DecPK

你写成了 conosle.log 而不是 console.log。 - user14779090

console.log 中有一个拼写错误。 - Sanket Shah

是的，我已经更改了它，但仍然不起作用。 - mostafa

onChange 事件发生在输入框内容改变并且焦点从输入框移开的时候。当你清除 name 后，虽然内容改变但是焦点仍然在输入框内，所以不会触发 onChange 事件。我猜这可能能回答你的问题。你可以尝试使用 value 而不是 defaultValue。 - Sanket Shah

我尝试过了，但是这个值是不可变的，当我使用value而不是defaultValue时它并不会改变。@SanketShah - mostafa

Answer 1

值没有改变是因为在 ReactJS 组件重新渲染时，状态只会更改一次，并且在 onChange 上使用 console.log 不会更新状态的任何更改。因此，您需要在 onChange 事件中更新状态。

请尝试以下操作，我假设这是一个类组件，因为您使用了 this.state.name：

<Form.Control
  type="text"
  name="name"
  placeholder="name"
  defaultValue={this.state.name || ""}
  value={this.state.name}
  onChange={e=>this.setState({name:e.target.value})}
/>

- Arvind Pal

Answer 2

更新

尝试使用不受控制的输入：

<Form.Control
    type="text"
    placeholder="name"
    onChange={(e) => console.log(e.target.value)}
/>

- Rashed Rahat

---

我修改了代码，但还是不起作用。错误发生在我写代码的时候。 - mostafa

我已经更新了我的代码，请现在再试一次。如果您有任何问题，请告诉我。 - Rashed Rahat

谢谢，但我需要一个默认值。 - mostafa

Answer 3

使用值而不是默认值：

<Form.Control
  type="text"
  placeholder="name"
  value={this.state.name || ""}
  onChange={e=>console.log(e.target.value)}
/>

- Bhojendra Rauniyar

---

我写了这段代码，但输入值没有改变。 - mostafa

当我使用值时，该值是不可变的。 - mostafa

你必须更新值，而不仅仅是记录它。 - Bhojendra Rauniyar

Answer 4

尝试使用空值代替null

<Form.Control
  type="text"
  placeholder="name"
  value={this.state.name || ""}
  onChange={e=>console.log(e.target.value)}
/>

- Bhaskar2510

---

我写了这段代码，但输入值没有改变。 - mostafa

当我使用value而不是defaultValue时，该值是不可变的。 - mostafa