表单react 是个单向数据流的框架，所以在表单元素与其它 dom 元素有所不同，而且和双向绑定的框架在操作上也有很大不一样。所以在这里单独拿出来说。
输入受控import react from 'react' import reactdom from 'react-dom' class component1 extends react.component{ constructor(props){ super(props) this.state = { text: 'hello react' } } render(){ return ( <p> <p><label>写死value-锁定状态</label><input type="text" value="hello react"/></p> <p><label>动态value-锁定状态</label><input type="text" value={this.state.text}/></p> <p><label>不指定value-没锁状态</label><input type="text"/></p> </p> ) } } reactdom.render(<component1 />, document.getelementbyid('p1'));
这个案例说明了在 react 在表单元素因单向数据流所以在 value 给定后就无法再次修改，所以需要配合 onchange 事件来完成。所以上面的案例应该是这样的
class component1 extends react.component{ constructor(props){ super(props) this.state = { text: 'hello react' } } change = (e) => { this.setstate({text: e.target.value}) } render(){ return ( <p> <p><label>写死value-锁定状态</label><input type="text" value="hello react" onchange={this.change}/></p> <p><label>动态value-没锁状态</label><input type="text" value={this.state.text} onchange={this.change}/></p> <p><label>不指定value-没锁状态</label><input type="text"/></p> </p> ) } }
效果预览
textarea 元素在普通 html 中，textarea 元素是节点文本值
<textarea> hello there, this is some text in a text area </textarea>
但在 react 中，该元素需要使用 value 属性。
class component1 extends react.component{ constructor(props){ super(props) this.state = { text: 'hello react' } } change = (e) => { this.setstate({text: e.target.value}) } render(){ return ( <p> <textarea value={this.state.text} onchange={this.change}/> </p> ) } }
select 元素在普通 html 中， select元素要指定默认选中值，就得在对应的option中加上属性selected
<select> <option value="grapefruit">grapefruit</option> <option value="lime">lime</option> <option selected value="coconut">coconut</option> <option value="mango">mango</option> </select>
但在 react 中，只需要给定属性value即可
class component1 extends react.component{ constructor(props){ super(props) this.state = { text: 'lime' } } change = (e) => { this.setstate({text: e.target.value}) } render(){ return ( <p> <select value={this.state.text} onchange={this.change}> <option value="grapefruit">grapefruit</option> <option value="lime">lime</option> <option value="coconut">coconut</option> <option value="mango">mango</option> </select> </p> ) } }
input file 元素因为<input type="file">是特殊的元素，它是只读的，所以在 react 中需要用ref来进行特殊处理
class component1 extends react.component{ submit = (e) => { console.log(this.file.files) } render(){ return ( <p> <input type='file' ref={input => {this.file = input}}/> <input type="button" value="submit" onclick={this.submit} /> </p> ) } }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
react实现选中li高亮步骤详解
js中的json和math使用案例分析
以上就是react中表单使用详解的详细内容。