React 表单组件

最新推荐文章于 2024-05-26 07:45:00 发布

dreaming_drop

最新推荐文章于 2024-05-26 07:45:00 发布

阅读量412

点赞数

原文链接：https://react.docschina.org/

版权

React可以通过用户输入的内容来决定显示结果，称之为受控组件；由DOM来进行处理时，则为不受控组件

1.受控组件

受控组件可以限制用户的输入，如下代码所示：

<body>
    <div id="try"></div>
    <script type="text/babel">
        class Try extends React.Component {
             constructor(props) {
                 super(props);
                 this.state = {value: ''};
             }
             render() {
                 return (
                    <input type="text" value={this.state.value} />
                    <div>当前输入的值为：{this.state.value}</div>
                 );
             }
         }
         ReactDOM.render(<Try />,document.getElementById('try'));
     </script>
</body>

上述代码运行时，用户无法进行输入，需要绑定一个onChange或者onInput事件才会触发

注：事件处理函数要写成箭头函数以便能使用this指向类组件

 change=()=> {
 this.setState({value: e.target.value});
             }
 <input type="text" value={this.state.value} onChange={this.change} />

上述代码未限制任何条件，若要限制条件可以加上条件语句if，比如要求用户输入的必须时数字就可以如下书写

change=()=> {
    if(!isNaN( e.target.value)){
    this.setState({value: e.target.value});
    }
}
<input type="text" value={this.state.value} onChange={this.change} />

上述代码运行时，如用户输入的不是数字，就输入框内就没有任何内容

2.非受控组件

在大多数情况下，使用受控组件来实现表单，通过react来改变数据。若要通过DOM要修改数据，可以书写非受控组件。其中非受控组件可以使用 ref 从 DOM 获取表单值

通过ref 从 DOM 获取表单可以使用this.input获取到表单节点，如下所示：

<body>
    <div id="try"></div>
    <script type="text/babel">
        class Try extends React.Component {
             constructor(props) {
                 super(props);
                 this.state = {value: ''};
             }
             watch() {
                 console.log(this.input) //获取节点
        　　 }
             render() {
                 return (
                <input type="text" ref={this.input}/> // 通过ref的方式来获取，即获取该节点
                <button onClick={this.watch}>查看输入框的值</button>
                 );
             }
         }
         ReactDOM.render(<Try />,document.getElementById('try'));
     </script>
</body>

也可以使用this.refs.refName.value获取表单值(refName表示ref属性值)，如下所示

             watch() {
                console.log(this.refs.myName.value) // 直接取值
        　　 }
             render() {
                 return (
                <input type="text" ref='myName' /> 
                <button onClick={this.watch}>查看输入框的值</button>
                 );
             }

另外需要注意的是，若要设置表单的默认值时，不能直接通过value设置，因为在react中，一旦将value值设置了，就不能进行更改了(也就是受控组件的原理)，想设置默认值时，需要赋值给defaultValue，若下所示：

<input type="text" defaultValue="默认值" /> // 未进行绑定

dreaming_drop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 表单组件

React可以通过用户输入的内容来决定显示结果，称之为受控组件；由DOM来进行处理时，则为不受控组件1.受控组件受控组件可以限制用户的输入，如下代码所示：<body> <div id="try"></div> <script type="text/babel"> class Try extends React.Component { constructor(props) {...
复制链接

扫一扫