本文主要是介绍react 中获取多个input输入框中的值的 俩种写法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
1. 使用受控组件
2. 使用非受控组件
1. 使用受控组件
这是React中最常见的方法，每个输入框都与React组件的state相关联，并通过
onChange事件来更新state。
代码示例：
import React, { Component } from 'react';class MultipleInputExample extends Component {constructor(props) {super(props);this.state = {input1: '',input2: '',input3: ''};}handleInputChange = (event) => {const name = event.target.name;const value = event.target.value;this.setState({[name]: value});}handleSubmit = (event) => {event.preventDefault();const { input1, input2, input3 } = this.state;// 现在你可以在这里使用 input1、input2 和 input3 的值console.log('Input 1:', input1);console.log('Input 2:', input2);console.log('Input 3:', input3);}render() {return (<form onSubmit={this.handleSubmit}><inputtype="text"name="input1"value={this.state.input1}onChange={this.handleInputChange}/><inputtype="text"name="input2"value={this.state.input2}onChange={this.handleInputChange}/><inputtype="text"name="input3"value={this.state.input3}onChange={this.handleInputChange}/><button type="submit">提交</button></form>);}
}export default MultipleInputExample;
2. 使用非受控组件
在这种方法中，你可以使用
ref来获取输入框的值。这通常在需要与非受控库或DOM集成时使用。
代码示例：
import React, { Component } from 'react';class MultipleInputExample extends Component {constructor(props) {super(props);this.inputRefs = {input1: React.createRef(),input2: React.createRef(),input3: React.createRef()};}handleSubmit = () => {const input1Value = this.inputRefs.input1.current.value;const input2Value = this.inputRefs.input2.current.value;const input3Value = this.inputRefs.input3.current.value;console.log('Input 1:', input1Value);console.log('Input 2:', input2Value);console.log('Input 3:', input3Value);}render() {return (<div><input type="text" ref={this.inputRefs.input1} /><input type="text" ref={this.inputRefs.input2} /><input type="text" ref={this.inputRefs.input3} /><button onClick={this.handleSubmit}>提交</button></div>);}
}export default MultipleInputExample;
这篇关于react 中获取多个input输入框中的值的 俩种写法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
