reactjs - 反应： event.target.value 如何在以下工作

Question

在下面的代码中，我无法理解 event.target.value 是如何工作的。我浏览了文档，但不幸的是我无法遵循这一点。谁能用更简单的术语解释一下？

    import React, { Component } from 'react';

import './NewPost.css';

class NewPost extends Component {
    state = {
        title: '',
        content: '',
        author: 'Max'
    }

    render () {
        return (
            <div className="NewPost">
                <h1>Add a Post</h1>
                <label>Title</label>
                <input type="text" value={this.state.title} onChange={(event) => this.setState({title: event.target.value})} />
                <label>Content</label>
                <textarea rows="4" value={this.state.content} onChange={(event) => this.setState({content: event.target.value})} />
                <label>Author</label>
                <select value={this.state.author} onChange={(event) => this.setState({author: event.target.value})}>
                    <option value="Max">Max</option>
                    <option value="Manu">Manu</option>
                </select>
                <button>Add Post</button>
            </div>
        );
    }
}

export default NewPost;

标签： reactjs

Answer 1

“ change”事件<input>是由、<select>和<textarea>元素触发的标准 DOM 事件。React 中的onChange处理程序和事件对象几乎与原生对象相同。

• event.target是事件开始的元素
• HTMLInputElement.value是表单控件的当前形式

所以...

• event.target.value<input>是触发“更改”事件的当前值

对于 React 中的大多数onX事件处理程序，最好的文档可以在 MDN（Mozilla 开发者网络）中找到相关的原生事件。