我刚刚开始学习 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 会计算是否需要重新渲染自身,以及在这种情况下需要重新渲染组件的哪些部分。
有关状态的更多信息 https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
关于javascript - ReactJS:onClick更改元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29303456/