Question

我从React开始，我尝试创建一个名为Hello name 的简单表单！

但是我觉得有2个状态元素不是正确的方法。

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

顺便说一句，我知道我可以将名称状态绑定到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

这是refs more-about-refs

的文件

这是“React.js”这样做的方式吗？

1 个答案: