当输入值清除时 onChange 不起作用答案

【问题标题】：onChange doesn't work when value of input clears当输入值清除时 onChange 不起作用
【发布时间】：2021-09-26 06:16:33
【问题描述】：

我在处理输入值变化时遇到问题所以这是我的反应代码，onChange 有效，但是当我清除默认值时，它不会记录任何内容，直到我进行另一次更改。

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

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

【问题讨论】：

conosle.log你不觉得这里有错别字
你写的是conosle.log而不是console.log
console.log有错字
是的，我改了，但还是不行
onChange 事件在输入内容发生更改并且焦点从输入移出时发生。当您清除 name 时，内容会发生变化，但焦点仍在输入上，因此不会触发 onChange 事件。我想也许这会回答你的问题。您可以尝试使用value 而不是defaultValue

标签： javascript html reactjs jsx

【解决方案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})}
/>

【讨论】：

【解决方案2】：

使用值代替默认值：

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

【讨论】：

我写了这段代码，但输入的值没有改变
使用 value 时 value 是不可变的
你必须更新值而不是仅仅记录它。

【解决方案3】：

尝试使用空值而不是给它 null

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

【讨论】：

我写了这段代码，但输入的值没有改变
当我使用 value 而不是 defaultValue 时，该值是不可变的

【解决方案4】：

更新

尝试不受控制的输入：

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

【讨论】：

我更改了代码但仍然无法工作我在这里写代码时发生的错误我
我已经更新了我的代码，请现在再试一次。如果您有任何问题，请告诉我。
Thnaks 但我需要一个默认值