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

Posted 2023-02-21

【中文标题】当输入值清除时 onChange 不起作用

【英文标题】：onChange doesn't work when value of input clears

【发布时间】：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

【参考方案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 但我需要一个默认值