ReactJS：onClick更改元素

  • Z时代
  • 2024-01-10
  • 分类：问答

我刚刚开始学习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.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-

tag。当一个组件的状态改变时（使用setState方法），React计算它是否需要重新渲染自己，在这种情况下，React计算它需要重新渲染组件的哪一部分。

有关状态的更多信息 https://facebook.github.io/react/docs/interactivity-and-dynamic-

uis.html

以上是 ReactJS：onClick更改元素 的全部内容， 来源链接： utcz.com/qa/409768.html

回到顶部