Question

在Udemy＆＃34; Modern React with Redux＆＃34;当然，Stephen Grider给出了一个例子，其中输入元素value由设置该值的onChange事件改变。具体来说，该功能如下所示：

onChange= function(event){
    this.setState({ term: event.target.value})
}

，输入组件如下：

<input value = {this.state.term} />

我不明白event.target.value如何在我眼前更新，状态是＆＃34;硬编码＆＃34;到event.target.value，即当组件呈现时，为空字符串。因此，如果state.term为""，则输入＆＃39; s value将被覆盖并且＆＃34;设置＆＃34;是state.term，它是如何更新的？

import React, { Component } from 'react';

class SearchBar extends Component {
    constructor (props) {
        super(props);

        this.state = { term: '' };
    }
    render() {
        return(
            <div>
                <input 
                    value = {this.state.term}
                    onChange={event => this.setState({ term: event.target.value})} />
            </div>
        );
    }

}

export default SearchBar;

编辑：基本上我认为我的问题归结为：<input>元素与value event.target.value是否相同？

EDIT2：＆＃34;同样的事情＆＃34;在Javascript传递引用的单词意义上，即在同一对象上引用相同值的东西？

Answer 1

initial value = ''
用户按'r'
您根据event.target.value设置状态。新state.term为'r'
状态更改会触发组件更新。您输入的值为this.state.term或'r'

回答你的编辑：

是和否 - value最终会与event.target.value相同，但只是因为该值使用的state.term已设置为event.target.value的值

event.target.value =＆gt;确定=＆gt; state =＆gt;确定=＆gt; input[value]

React控制的组件如何更新？

1 个答案: