Question

我有多个输入元素和一个按钮，应该将所有输入值收集在一起，然后单击按钮后将它们放入数组中。

        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <InputElement onChangeListener={(event) => this.handleIDs(event)} />
        <br></br>                     
        <p><button onClick = {() => this.handleAllIDs()}>absenden</button></p>

我只想对所有输入字段使用一种方法，以某种方式可行吗？还是我必须对每个输入字段使用不同的状态来区分值，甚至创建不同的方法？单击按钮后，我想将所有值压入Element Class状态数组值或类似值，并使用这些值进行数据库请求。

编辑：我想我找到了解决方案，您可以为每个输入元素（〜输入字段）分配名称属性，然后查询名称并将状态设置为与输入字段相同的状态变量：

handleIDs= (event) => {
    let name = event.target.name;
    let id = event.target.value;
    if (isNaN(id)) {
        this.setState({errorMessage: 'ID is not a number'})
    } else {
        this.setState({ [evt.target.name]: evt.target.value });
    }       
}

我不知道您可以将新的键分配给带有方括号符号的对象。

EDIT2：我认为引用DOM元素还有另一种方式：您可以在类构造函数中创建引用对象：

constructor(props) {
    super(props);
    this.textInput1 =  React.createRef();
}

，然后将引用传递给元素：

 <InputElement reference={this.textInput1}.../>

如果它是自定义元素，则必须将引用向下传递给基本元素：

const inputElement = (props) => (
    <input 
        ref={props.reference}
        onChange={props.onChangeListener}>
    </input>
)

在方法内部，您可以通过使用引用名称引用元素来对其进行操作：

 handleInput = (event) => {
        console.log(this.textInput1.current.value);
     ...
}

点击按钮时React / Next.js处理多个Element输入值

0 个答案: