React Ref & 双向数据绑定

class

import React from 'react'
import PropTypes from 'prop-types'



class AddColorForm extends React.Component {

    static propTypes = {
        onNewColor: PropTypes.func
    }

    static defaultProps = {
        onNewColor: f=>f
    }

    constructor(props) {
        super(props);
        this.submit = this.submit.bind(this);
    }

    submit(e) {
        const {_title, _color} = this.refs;
        // const {_title, _color} = React.createRef();
        this.props.onNewColor(_title.value, _color.value);
        e.preventDefault();
        alert(`New Color: ${_title.value} ${_color.value}`);
        _title.value = '';
        _color.value = '#000000';
        _title.focus();
    }

    render() {
        return (
            <form onSubmit={this.submit}>
                <input ref="_title"
                       type="text"
                       placeholder="color title..."
                       required/>
                <input ref="_color"
                       type="color"
                       required/>
                <button>ADD</button>
            </form>
        )
    }
}

export default AddColorForm

stateless

import React from 'react'

const AddColorForm = ({onNewColor=f=>f}) => {
    let _title, _color;
    const submit = e => {
        e.preventDefault();
        onNewColor(_title.value, _color.value);
        _title.value = '';
        _color.value = '#000000';
        _title.focus();

    }

    return (
        <form onSubmit={submit}>
            <input ref={(input) => {
                        console.log(input);
                        _title = input
                    }}
                   type="text"
                   placeholder="color title..."
                   required/>
            <input ref={input => _color = input}
                   type="color"
                   required/>
            <button>ADD</button>
        </form>
    )
}

export default AddColorForm;