Question

不必将事件侦听器附加到每个元素，而是如何将事件侦听器添加到组？考虑具有多个输入元素。除了重复onChange={this.handleChange}之外，如何将所有输入元素的此函数附加到onChange？

使用香草JS就像选择所有输入，循环和附加一样容易。

render() {
    return (
        <form>
            <input type="text" name="firstName" placeholder="First Name" onChange={this.handleChange} />
            <br />
            <input type="text" name="lastName" placeholder="Last Name" onChange={this.handleChange} />
            <h1>{this.state.firstName} {this.state.lastName}</h1>
        </form>
    )
}

Answer 1

您可以创建一个专用的实时组件，例如：

render() {
    const Input = props =>
      <input onChange={ this.handleChange } { ...props } />

    return (
        <form>
            <Input type="text" name="firstName" placeholder="First Name" />
            <br />
            <Input type="text" name="lastName" placeholder="Last Name" />
            <h1>{this.state.firstName} {this.state.lastName}</h1>
        </form>
    )
}

Answer 2

您可以尝试使必须订阅的元素（例如代码示例中的inputs）成为组件，使用它们创建一个数组对象并在其上.map，将{{1 }}对他们起作用。

如何将事件侦听器附加到React中的多个元素（非嵌入式）？

2 个答案: