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

Question

我在处理输入值更改时遇到问题这是我在react中的代码，onChange有效，但当我清除默认值时，它不会记录任何内容，直到我做另一个更改。

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

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

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})}
/>

Answer 2

使用值而不是默认值：

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

Answer 3

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

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

Answer 4

更新

尝试不受控制输入：

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