在React中,要获取<input>
元素的值,你需要使用受控组件。受控组件意味着输入字段的值被React状态控制。这是如何实现的:
首先,你需要创建一个状态变量来保存输入字段的值:
const [inputValue, setInputValue] = React.useState('');
然后,你需要将value属性绑定到状态变量,并将输入元素的事件处理程序绑定到setInputValue函数:
<input
type="text"
value={inputValue}
onChange={e => setInputValue(e.target.value)}
/>
当用户在输入字段中键入时,onChange事件将触发,并更新inputValue状态变量。这使得React重新渲染组件,并将输入字段的值更新为最新的inputValue。
2.使用ref来获取;
<input ref='username' onChange={()=>this.inputChange()}/>
<button onClick={()=>this.getInputValue()} >获取input的值</button>
inputChange(){
//获取dom节点元素
//1.添加ref属性
//2.使用this.refs.username获取dom节点
let val=this.refs.username.value;
this.setState({
username:val
})
}
getInputValue(){
console.log(this.state.username)
}
使用ref自定义一个属性,可以通过this.refs.属性名称.value获取内容。