Question

我有一个简单的输入字段，它从 onComponentMount 获取一个值。现在我希望用户能够更改值但它不起作用。这是我的代码：

  componentDidMount = async () => {
    const IPAddress = await publicIp.v4();
    this.setState({ Client_IP: IPAddress })
  }

  eventHandler = () => (e: any) => {
    e.persist()
    this.setState((prevState: any) => ({
      IPObject: {
        ...prevState.IPObject,
        IPList: e?.target?.value
      }
    }));
  }

    <Input placeholder="IP address" required={true}
      value={this.state.Client_IP} onChange={this.eventHandler()}></Input>

Answer 1

将您的输入更改为：

onChange={this.eventHandler}

当你使用括号时，你必须像箭头函数一样调用它：

onChange={() => this.eventHandler()}

并确保更改您想要的字段，在该 eventHandler

Answer 2

您的代码不断调用 eventHandler 函数。

查看此处 docs 以了解在 React 中使用 JSX 的 eventHandling

正确的语法是

  <Input placeholder="IP address" required={true} value={this.state.Client_IP} onChange={() => this.eventHandler()}></Input>

或

  <Input placeholder="IP address" required={true} value={this.state.Client_IP} onChange={this.eventHandler}></Input>

输入字段 Onchange 不允许输入

2 个答案: