React学习笔记-前端框架学习-第三篇

接React学习笔记第二篇

此笔记只作学习使用，充分参考了React官网-文档和思否上的相关博客！
建议学习React还是要充分的学习官网上的文档教程！

表单

• HTML表单元素与React中的其他DOM元素有所不同，因为表单元素保留一些内部状态。
• 实例：「下面的表单只接受一个唯一的name」

<form>
<label>
    Name:
    <input type="text" name="name" />
</label>
    <input type="submit" value="Submit" />
</form>

受控组件

• 在HTML中，<input>,<textarea>,<select>这类表单元素会维持自身状态，并根据用户输入进行更新。
• 在React中，可变的状态通常保存在组件的状态属性中，并且只能用setState()进行更新。
• 通过使react变成一种单一数据源的状态来结合二者。react负责的渲染表单的组件仍然控制用户后续输入时所发生的变化。
• 其值有react控制的输入表单元素成为“受控组件”。
• 将上例修改成如下形式

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.toUpperCase()});
        //限制输入全部都是大写字母
    }

    handleSubmit(event){
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }

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

textarea标签

• 在HTML中元素通过子节点来定义它的文本内容

<textarea>
    Hello, this is some text in a text area
</textarea>

• 在react中会用value属性来替代。

class EssayForm extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            value: '请就你最喜爱的DOM元素写一篇文章'
        };
        this.handleChange = this.handleChange.bind(this);
        this.hnadleSubmit = 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>
                    Name:
                    <textarea value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            <form>
        );
    }

• this.state.value是在构造函数中初始化，这样文本区域就能获取其中的文本。

select标签

在HTML中，会创建一个下拉列表，

<select>
    <option value="grapefruit">Grapefruit</option>
    <option value="lime">Lime</option>
    <option selected value="coconut">Coconut</option>
    <option value="mango">Mango</option>
</select>

• 在react中，不使用select属性，在根select标签上用value属性来表示选中项。

class Flavorm 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('Your favorite flavor is: ' + this.state.value);
        event.prevenDefault();
    }

    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                Pick your favorite La Croix flavor:
            <select value={this.state.value} onChange={this.handleChange}>
                <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
        );
    }
}

file input

在HTML中允许用户从他们的存储设备中选择一个或多个文件以提交表单的方式上传到服务器，或者通过JS的file API 对文件进行操作。

<input type="file" />
<!-- 该标签的value属性是只读的，是React中的一个非受控组件 -->

多个输入的解决办法

• 当处理多个受控input元素时，可以通过给每个元素添加一个name属性，来处理函数根据event.target.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.check : target.value;
            const name = target.name;

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

        render(){
            return (
                <form>
                    <label>
                        Is going:
                        <input
                            name="isGoing"
                            type="checkbox"
                            checked={this.state.isGoing}
                            onChange={this.handleInputChange} />
                    </label>
                    <br />
                    <label>
                        Number of guests:
                        <input
                            name="numberOfGuests"
                            type="number"
                            value={this.state.numberOfGuests}
                            onChange={this.handleInputChange} />
                    </label>
                <form>
            );
        }
 }

状态提升

• 当几个组件需要共用状态数据时，最好将共享的状态提升至他们最近的父组件当中进行管理。

• 官网文档有一个实例:根据温度判断返回内容

• 在React应用中，对任何可变数据应当只有一个单一“数据源”。

  • 数据流自上而下

此笔记只作学习使用，充分参考了React官网-文档和思否上的相关博客！
建议学习React还是要充分的学习官网上的文档教程！