react表单

Posted 2020-09-01 此生依然

和html一样, react也提供了许多的可供交互的组件, 这些组件有 input, textarea, option等.

 

react 提供的这些组件与其他的组件又有一些不同, 其他的组件多数用于展示信息, 而这些组件可以通过用户的操作进行交互.

 

那么input, checked, selected 主要是在哪些地方可以使用呢?

1. value, 支持<input> 和 <textarea>两种组件.

2. checked 支持<input> 类型为checkbox和radio两种.

3. select 支持<option>组件.

备注: 与传统的html不同的是, 传统的<textarea>的值是直接写在<textarea>的子节点上, 比如:

<textarea>this is textarea value</textarea>

但是react的<textarea>组件的值是写在它的value属性上面的, 如:

<textarea value="this is react textarea value" />

他们都可以调用一个共同的方法, 那就是onChange方法, 该方法在value值发生改变时触发.

 

 

与用户进行交互, 就是当用户输入了值之后, 动态改变state的值, 有两种方式, 一种是带有控制器的组件, 一种是没有控制器的组件, 下面具体讲解.

1.有控制器的组件: 

input 或 textarea, option的值直接绑定state

class Main extends Component{
    constructor(props){
        super(props);
        this.state = {
            username : "zhangsan "
        };
        this.handleUsername = this.handleUsername.bind(this);
    }
　　// 处理用户名输入
    handleUsername(event){
        this.setState({
            username : event.target.value
        })
    }
    render(){
        return(
            <input value={this.state.username} onChange={this.handleUsername} />
        )
    }
}
export default Main;

在这个例子中, 必须给input添加onChange事件, 因为它的值绑定了this.state.username, 如果不通过setState改变state.username的值的话, 不管如何输入, input中的内容是不会发生改变的.

 

2. 没有控制器的组件:

class Main extends Component{
    constructor(props){
        super(props);
        this.state = {
            username : "zhangsan "
        };
        this.handleUsername = this.handleUsername.bind(this);
    }
　　// 处理用户名输入
    handleUsername(event){
        this.setState({
            username : event.target.value
        })
    }
    render(){
        return(
            <input defaultValue="haha" onChange={this.handleUsername} />
        )
    }
}
export default Main;

在这个例子里面, 我们没有把state.username直接绑定到input上面, 但是我们还是调用了onChange事件, 因为如果我们不手动改变state.username的值, 虽然输入框中的内容发生改变了, 但是我们获取到的永远都是设置的默认的"haha"那个值.

 

defaultVaule, defaultChecked 只用于组件的初始化渲染.

 在使用select组件时, 为了方便操作, select 的value的值等于option的值, 则表示这个选项被选中了.

<select value="B">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

select 的值允许是一个数组, 并设置multiple属性为true, 则表示多个option被选中:

<select multiple={true} value={["B","C"]}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

 

如果想要手动触发操作, 就需要给对应的地点多加一个ref熟悉, 通过ref找到对应的节点, 然后触发对应的操作, 比如,form.submit();

 

class Submit extends Component{
　　constructor(props){
　　　　　super(props);
　　　　　this.handleUsername = this.handleUsername.bind(this);
　　　　　this.submit = this.submit.bind(this);
　　　　　this.state = {
　　　　　　username:""
　　　　　};

　　}
　　handleUsername(event){
　　　　this.setState({
　　　　　　username:event.target.value
　　　　})
　　}
　　// 提交
　　submit(){
　　　　　this.form.submit();
　　}

　　render(){
　　　　return(
　　　　　　<form ref="form">
　　　　　　　　<input type="text" value={this.state.username} onChange={this.handleUsername} />
　　　　　　　　<button onClick={this.submit}>提交</button>
　　　　　　</form>
　　　　)
　　}

}
export default Submit;

　　

 

参考链接: http://reactjs.cn/react/docs/forms.html