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;

Answer 1

"change" event是由child: Column ( children:[ Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ CircleAvatar( backgroundImage: AssetImage("assets/images/1700.jpg"), radius: 25, ), SizedBox(width: 10,), Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("Test", style: TextStyle(color: Colors.white,fontSize: 17, fontWeight: FontWeight.bold),maxLines: 1,), SizedBox(height: 5,), Text("Testing the test. ", style: TextStyle(color: Colors.white,fontSize: 15),maxLines: 1,) ], ), ], ), ] )，<input>和<select>元素触发的标准DOM事件。 React中的<textarea>处理程序和Event对象与本地对象几乎相同。

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

所以...

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

对于大多数React中的<input>事件处理程序，可能在MDN（Mozilla开发人员网络）中找到有关本机事件的最佳文档。

Answer 2

React使用SyntheticEvent，它是浏览器本地事件的跨浏览器包装器。 React将事件标准化，以使它们在不同的浏览器中具有一致的属性。

这就是为什么当您在React中handle events时，它与本机浏览器事件相同。

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

2 个答案: