要领一 操作DOM提供的Event工具的target事件属性取值并提交
import React from 'react'; class InputDemo extends React.Component{ state = { InputValue : "",//输入框输入值 }; handleGetInputValue = (event) => { this.setState({ InputValue : event.target.value, }) }; handlePost = () => { const {InputValue} = this.state; console.log(InputValue,'------InputValue'); //在此做提交操纵，好比发dispatch等 }; render(){ return( <div> <input value={this.state.InputValue} onChange={this.handleGetInputValue} /> <button onClick={this.handlePost}>提交</button> </div> ) } } export default InputDemo;
这里的<input />和<button />都是用的html的标签，虽然也可以利用Antd的<Input />和<Button />组件，内里的内容是稳定的
首先在组件最上方state中界说了InputValue:"",下面<input />里写了value={this.state.InputValue}，假如去掉onChange事件，那么这时候输入框里是什么都输入不了的，因为
React认为所有的状态都应该由 React 的 state 节制，只要雷同于<input />、<textarea />、<select />这样的输入控件被配置了value值，那么它们的值永远以被配置的值为准。假如值没被改变，value就不会变革
React中要用setState才气更新组件的内容，所以需要监听输入框的onChange事件，获取到输入框的内容后通过setState的方法更新state的InputValue，这样<input />的内容才会及时更新
再说onChange的handleGetInputValue要领，操作了DOM的Event工具的target事件属性：
target 事件属性可返回事件的方针节点（触发该事件的节点），如生成事件的元素、文档或窗口
详情可见W3C尺度先容
要领二 操作React的ref会见DOM元素取值并提交无状态组件写法：
const InputDemo = () => { let inputValue; const handlePost = (e) => { if (e) e.preventDefault(); const valueTemp = inputValue.value; console.log(valueTemp, '------valueTemp'); //在此做提交操纵，好比发dispatch等 }; return ( <div> <form onSubmit={handlePost}> <input ref={input => inputValue = input} /> <button onClick={handlePost}>提交</button> </form> </div> ) }; export default InputDemo;
有状态组件写法：
import React from 'react'; class InputDemo extends React.Component { handlePost = (e) => { if (e) e.preventDefault(); const valueTemp = this.inputValue.value; console.log(valueTemp, '------valueTemp'); //在此做提交操纵，好比发dispatch等 }; render() { return ( <div> <form onSubmit={this.handlePost}> <input ref={input => this.inputValue = input} /> <button onClick={this.handlePost}>提交</button> </form> </div> ) } }; export default InputDemo;
Ref 是 React 提供应我们的安详会见 DOM 元素可能某个组件实例的句柄。我们可觉得元素添加 ref 属性，然后在回调函数中接管该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回。
除了这两种写法，还可以操作Antd的Form组件实现表单成果，传送门：React操作Antd的Form组件实现表单成果
到此这篇关于React获取input值并提交的2种要领的文章就先容到这了,更多相关React获取input值并提交内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！
您大概感乐趣的文章: