Javascript ReactJS：onClick 更改元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29303456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS: onClick change element
提问by jansmolders86
I've just started learning React and have a question.
我刚刚开始学习 React 并有一个问题。
I want to do the following:
我想做以下事情：
If a user clicks on a paragraph I want to change the element to an input field that has the contents of the paragraph prefilled. (The end goal is direct editing if the user has certain privileges)
如果用户单击一个段落，我想将该元素更改为一个输入字段，该字段已预填充该段落的内容。（如果用户有一定的权限，最终目标是直接编辑）
I'm come this far but am totally at a loss.
我已经走了这么远，但我完全不知所措。
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>
);
}
});
How can I override the render from the editSloganfunction?
如何覆盖editSlogan函数的渲染？
回答by Silfverstrom
If I understand your questions correctly, you want to render a different element in case of an "onClick" event.
如果我正确理解您的问题，您希望在“onClick”事件的情况下呈现不同的元素。
This is a great use case for react states.
这是反应状态的一个很好的用例。
Take the following example
看下面的例子
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>);
}
}
})
This will change the components state, and makes React render the div instead of the a-tag. When a components state is altered(using the setState method), React calculates if it needs to rerender itself, and in that case, which parts of the component it needs to rerender.
这将改变组件状态，并使 React 渲染 div 而不是 a-tag。当组件状态改变时（使用 setState 方法），React 会计算它是否需要重新渲染自己，在这种情况下，它需要重新渲染组件的哪些部分。
More about states https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
更多关于状态 https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
回答by Ivan Osipov
You can solve it a little bit more clear way:
你可以用更清晰的方式解决它：
class EditableLabel extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.value,
editing: false
};
this.initEditor();
this.edit = this.edit.bind(this);
this.save = this.save.bind(this);
}
initEditor() {
this.editor = <input type="text" defaultValue={this.state.text} onKeyPress={(event) => {
const key = event.which || event.keyCode;
if (key === 13) { //enter key
this.save(event.target.value)
}
}} autoFocus={true}/>;
}
edit() {
this.setState({
text: this.state.text,
editing: true
})
};
save(value) {
this.setState({
text: value,
editing: false
})
};
componentDidUpdate() {
this.initEditor();
}
render() {
return this.state.editing ?
this.editor
: <p onClick={this.edit}>{this.state.text}</p>
}
}
//and use it like <EditableLabel value={"any external value"}/>;