在 onPressEnter 之后反应 KeyboardEvent 更改输入值答案

【问题标题】：React KeyboardEvent change input value after onPressEnter在 onPressEnter 之后反应 KeyboardEvent 更改输入值
【发布时间】：2019-02-12 17:02:01
【问题描述】：

我有一个输入，我需要使用onPressEnter 调用的方法重置值这是输入：

<Input
    type="text"
    placeholder="new account"
    onPressEnter={(event) => this.onCreateAccount(event)}>
</Input>

这是调用的方法：

onCreatePitch(event: React.KeyboardEvent<HTMLInputElement>, accountId: number) {
    this.props.onCreatePitch(event.currentTarget.value, accountId);
    /* event.currentTarget.value = '';  can't do this, it's a read only value*/
}

如您所见，event.currentTarget.value 将不起作用，因为它是只读值并且event.target.value 不是有效类型。不知道在这里做什么谢谢！

【问题讨论】：

听起来你需要把它设为Controlled Component。
React 使用state，你输入的 value 属性应该使用这个，.. 所以当你想重置时，你会做类似setState({input: ""}) 之类的事情。你很少需要访问 DOM直接，..
你是用antd形式维护状态吗？
@Max 不，我试图不必走那条路，但我想我必须这样做。
如果你不是，那么肖恩的回答应该有效。

标签： javascript reactjs typescript antd

【解决方案1】：

你可以有一个控制输入值的状态

state = {
  value: ""
}

onEnterPress(event) {
 if (event is Enter) {
   this.setState({value: ""})
   return
 }
}

<Input
    type="text"
    placeholder="new account"
    value={this.state.value}
    onPressEnter={this.onEnterPressed} />

【讨论】：