关于react.js:React的受控组件用法详解

一、受控组件是什么？

用 state 来获取和设置输出元素值的组件，称之为 受控组件。<input type="text">, <textarea> 和 <select> 等标签都可用 value 属性，来实现受控组件。

二、有哪些受控组件？

1、input

– 阻止表单提交

class NameForm extends React.Component {constructor(props) {super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {this.setState({ value: event.target.value});
    }

    handleSubmit(event) {alert('提交的名字:' + this.state.value);
        event.preventDefault();}

    render() {
        return (<form onSubmit={this.handleSubmit}>
                <label>
                    名字:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

– file 类型 input

// file 类型的 input，属性 value 是只读的，所以是非受控组件
<input type="file" />

– 多个 input

// 多个 input 时，设置下 name 属性，即可动静操作，无需硬编码
class Reservation extends React.Component {constructor(props) {super(props);
        this.state = {
            isGoing: true,
            numberOfGuests: 2
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({[name]: value
        });
    }

    render() {
        return (
            <form>
                <label>
                    参加:
                    <input
                        name="isGoing"
                        type="checkbox"
                        checked={this.state.isGoing}
                        onChange={this.handleInputChange} />
                </label>
                <br />
                <label>
                    来宾人数:
                    <input
                        name="numberOfGuests"
                        type="number"
                        value={this.state.numberOfGuests}
                        onChange={this.handleInputChange} />
                </label>
            </form>
        );
    }
}

2、textarea

用 value 属性来设置 textarea 的文本内容：

class EssayForm extends React.Component {constructor(props) {super(props);
        this.state = {value: '请撰写一篇对于你喜爱的 DOM 元素的文章.'};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {this.setState({ value: event.target.value});
    }

    handleSubmit(event) {alert('提交的文章:' + this.state.value);
        event.preventDefault();}

    render() {
        return (<form onSubmit={this.handleSubmit}>
                <label>
                    文章:
                    <textarea value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

3、select

传统 HTML 中，用 selected 来设置选中项，而在 React 中应用 value 属性：

// HTML 中应用 selected 属性
< select >
  <option value="grapefruit"> 葡萄柚 </option>
  <option value="lime"> 酸橙 </option>
  <option selected value="coconut"> 椰子 </option>
  <option value="mango"> 芒果 </option>
</select >

// React 中应用 value 属性
class FlavorForm extends React.Component {constructor(props) {super(props);
        this.state = {value: 'coconut'};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {this.setState({ value: event.target.value});
    }

    handleSubmit(event) {alert('你喜爱的风味是:' + this.state.value);
        event.preventDefault();}

    render() {
        return (<form onSubmit={this.handleSubmit}>
                <label>
                    抉择你喜爱的风味:
                    <select value={this.state.value} onChange={this.handleChange}>
                        <option value="grapefruit"> 葡萄柚 </option>
                        <option value="lime"> 酸橙 </option>
                        <option value="coconut"> 椰子 </option>
                        <option value="mango"> 芒果 </option>
                    </select>
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

// 传递数组给 value 属性，示意 select 标签，选中多个选项
<select multiple={true} value={['B', 'C']}>

参考文档

• React 的受控组件用法详解！