ReactJS：onClick 更改元素

发布于03月27日

我刚开始学习react ，有个问题.

我想做以下几件事:

如果用户单击某个段落，我想将元素更改为一个输入字段，其中预先填充了该段落的内容.

我走了这么远，但完全不知所措.

var AppHeader = React.createClass({
    editSlogan : function(){
        return (
            <input type="text" value={this.props.slogan} onChange={this.saveEdit}/>
         )
    },
    saveEdit : function(){
        // ajax to server
    },
    render: function(){
        return (
            <header>
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-12">
                            <h1>{this.props.name}</h1>
                            <p onClick={this.editSlogan}>{this.props.slogan}</p>
                        </div>
                    </div>
                </div>
            </header>
        );
    }
});

如何覆盖editSlogan函数中的渲染？

推荐答案

如果我正确理解了您的问题，那么您希望在"onClick"事件中呈现不同的元素.

这是react状态的一个很好的用例.

以下面的例子为例

React.createClass({ 
    getInitialState : function() {
       return { showMe : false };
    },
    onClick : function() {
       this.setState({ showMe : true} );
    },
    render : function() {
        if(this.state.showMe) { 
            return (<div> one div </div>);
        } else { 
            return (<a onClick={this.onClick}> press me </a>);
        } 
    }
})

这将更改组件状态，并使React渲染div而不是a标记.当一个组件状态发生改变时(使用setState方法)，React会计算它是否需要重新启用自身，以及在这种情况下，它需要重新启用组件的哪些部分.

更多关于州的信息