Rumah > Artikel > hujung hadapan web > React中表单使用详解
这次给大家带来React中表单使用详解,React中表单使用的注意事项有哪些,下面就是实战案例,一起来看一下。
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 给定后就无法再次修改,所以需要配合 <a href="http://www.php.cn/wiki/1464.html" target="_blank">onChange</a>
事件来完成。所以上面的案例应该是这样的
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> ) } }
效果预览
在普通 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> ) } }
在普通 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 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> ) } }
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci React中表单使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!