javascript - 这是 "React.js"的做法吗？

Question

我从 React 开始，尝试创建一个简单的表单，上面写着 Hello name!

但是我觉得拥有 2 个状态元素并不是执行此操作的正确方法。

有人知道或相信有更好的方法吗？

顺便说一句，我知道我可以将名称状态绑定(bind)到 h2，但我希望它在单击时发生。

    var Name = React.createClass({
                getInitialState:function(){
                    return {
                        inputname:'',
                        h2name:''
                    };
                },
                showName:function(event){
                    event.preventDefault();
                    this.setState({h2name:this.state.inputname}); 
                },
                updateName:function(event){
                    this.setState({inputname:event.target.value});
                }
                ,
                render:function(){
                    return (
                        <div>
                            <form onSubmit={this.showName}>
                                <input onChange={this.updateName} placeholder="Enter your name"></input>
                                <button type="submit">Show</button>
                            </form>
                            <h2>Hello {this.state.h2name}!</h2>
                        </div>
                    );
                }
            });
ReactDOM.render(<Name />,document.getElementById('mount-point'));

Answer 1

一个状态就足够了。

var Name = React.createClass({
    getInitialState: function () {
        return {
            inputname: ''
        };
    },
    showName: function (event) {
        event.preventDefault();
        this.setState({ inputname: this.refs.inputname.value });
    },

    render: function () {
        return (
            <div>
                <input ref="inputname" placeholder="Enter your name"></input>
                <button onClick={this.showName}>Show</button>
                <h2>Hello {this.state.inputname}!</h2>
            </div>
        );
    }
});
ReactDOM.render(<Name />, document.getElementById('root'));

您可以使用 refs 来获取输入值。我想你想要这个效果，这里是demo

这里是引用文献more-about-refs的文档