SOURCE

class NameForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            article: '',
            owner: true,
            hobby: ['编码', '游戏']
        }
    }

    handleChange = (e) => {
        const target = e.target
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name
        this.setState({
            [name]: value
        })
    }

    handleSubmit = (e) => {
        const { name, article, owner, hobby } = this.state
        console.log(`我的姓名是${name}，我写了文章《${article}》，这篇文章${ owner ? '是' : '不是'}我原创的，我的爱好是${hobby}`)
        e.preventDefault()
    }

    handleArticleChange = (e) => {
        this.setState({
            article: e.target.value
        })
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <div>
                    姓名：
                    <input
                        name="name"
                        type="text"
                        value={this.state.name}
                        onChange={this.handleChange}
                    />
                </div>
                <br/>
                <div>
                    文章：
                    <textarea
                        name="article"
                        value={this.state.article}
                        onChange={this.handleChange}
                    />
                </div>
                <div>
                    是否原创：
                    <input
                        name="owner"
                        type="checkbox"
                        checked={this.state.owner}
                        onChange={this.handleChange}
                    />
                </div>
                <div>
                    我的爱好：
                    <select
                        name="hobby"
                        value={this.state.hobby}
                        onChange={this.handleChange}
                        multiple={true}
                    >
                        <option value="编码">编码</option>
                        <option value="游戏">游戏</option>
                        <option value="创作">创作</option>
                        <option value="读书">读书</option>
                    </select>
                </div>
                <input type="submit" value="提交"/>
            </form>
        )
    }
}

ReactDOM.render(
    <NameForm/>,
    document.getElementById('app')
)

<div id="app"></div>