这段react代码里input的值为什么不严格输出state里的值？

Question

题目描述

题目来源及自己的思路

以下代码，<input>里每输入一个字符都应该console.log一遍input的值，这个好理解。我的问题是，这个值，应该永远是this.state里的'值'，因为状态从头到尾都没改变过。可是实际输出的都是'值a'，'值b'这样的，就是你键盘上按哪个键都会跟在'值'后面输出一遍。怎么解释这多出来的字母？

相关代码

class App extends React.Component {
            constructor(props) {
                super(props);
                this.state={
                    userName: '值',
                };
            }
            render() {
                return (
                    <input
                       type='text' 
                       value={this.state.userName} 
                       onChange={(e)=>this.changeName(e)}
                    />
                )
            }
            changeName(e) {
                console.log(e.target.value);
            }
        }

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

这个问题好啊，甚至还带一点幽默。我谈2点

1. 先搞清楚受控组件和非受控组件的区别
2. 你这个changeName 里，就不觉得缺点啥么？