[JavaScript知识库]React核心概念(三)

1.表单

受控组件

使 React 的 state 成为“唯一数据源”,渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”

//在提交表单时打印名称的受控组件
import React, { Component } from 'react'

export default class NameForm extends React.Component {

    state = { value: "" };

    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>
        );
    }
}

textarea 标签

而在 React 中， 使用 value 属性代替
和input用法差不多

<textarea value={this.state.value} onChange={this.handleChange} />

select 标签

React 并不会使用 selected 属性，而是在根 select 标签上使用 value 属性
你可以将数组传递到 value 属性中，以支持在 select 标签中选择多个选项：

<select multiple={true} value={['B', 'C']}>

文件 input 标签

因为它的 value 只读，所以它是 React 中的一个非受控组件。将与其他非受控组件在后续文档中一起讨论

<input type="file" />

处理多个输入

当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作

import React, { Component } from 'react'

export default class Demo extends React.Component {
    state = {
        isGoing: true,
        numberOfGuests: 2
    }

    handleInputChange = (event) => {
        const target = event.target;
        const value = target.name === 'isGoing' ? 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>
        );
    }
}

受控输入空值

在受控组件上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将value 设置为 undefined 或 null。

ReactDOM.render(<input value="hi" />, mountNode);

setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

2状态共享

React是单向数据流,父组件向子组件传递消息通过Props传递,

import React, { Component } from 'react'

// 子组件
class Child extends React.Component {
    render() {
        console.log(this.props.value);  // 123
        return (
            <div>
                从父组件接收的value是: {this.props.value}
            </div>
        );
    }
}

// 父组件
export default class Parent extends React.Component {
    render() {
        return (
            <Child value="123" />
        );
    }
}

子组件向父组件传值（回调函数）：通过回调进行传递数据

import React, { Component } from 'react'

// 子组件
export default class InputBox extends React.Component {

    handleChange = (e) => {
        this.props.inputChange(e.target.value);
    }

    render() {
        const input = this.props.input;
        return (
            <form>
                <label for="input">input something:</label>
                <input id="input" value={input} onChange={this.handleChange} />
            </form>
        );
    }
}

// 父组件
export default class Control extends React.Component {
    state = {
        input: ''
    }

    handleChange = (input) => {
        this.setState({ input: input });
    }

    render() {
        return (
            <div>
                <InputBox inputChange={this.handleChange} input={this.state.input} />
                <InputBox inputChange={this.handleChange} input={this.state.input} />
            </div>
        )
    }
}

兄弟组件通信:消息订阅与发布
1.安装

yarn add pubsub-js

2.引用

import PubSub from 'pubsub-js'

3.订阅消息
subscribe()回调函数参数：
msg：这是信息的名称，即subscribe()的第一个参数。
data：这是此次订阅到的消息，即南方日报收到了。
返回值：返回该订阅的id，类似于setInterval()返回的id，用于在组件销毁时取消订阅，这就可以优化了性能。

import React, { Component } from 'react'
import Bar from '../Bar/index'
import PubSub from 'pubsub-js'

export default class App extends Component {

    state = {
        msg: ""
    }

    componentWillMount() {
        // 订阅消息
        PubSub.subscribe(
            // 参数一:信息名称
            'subscribeName',
            (msg, data) => {
                // 第一个参数msg:为信息名称,第二个参数data:为信息内容
                console.log(msg, data);
                this.setState({
                    msg: data
                })
            })
    }

    render() {
        let { msg } = this.state
        return (
            <div>
                <Bar />
                <p style={{ color: 'red' }}>我是订阅的结果：{msg}</p>
            </div>
        )
    }
}

4.发布消息

PubSub.publish("对应于订阅的名称","要发布的内容");

import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class Bar extends Component {

    sendMsg = () => {
        // 发布消息
        PubSub.publish(
            // 参数一:信息名称
            'subscribeName',
            // 参数二:要发布的内容
            `我是发布的随机数：${parseInt(Math.random() * 1000)}`)
    }

    render() {
        return (
            <div>
                <button onClick={this.sendMsg}>发布消息</button>
            </div>
        )
    }
}