javascript - React - 单击 div 文本，从另一个 div 更改文本

Question

我是 React JS 的新手，所以对于这个问题我很抱歉。

我正在这里开发一个组件 ( https://codesandbox.io/s/8pkl8w6xy0 ) 我有一个 <div>里面有文字。在这之外 <div>有另一个文本。

我正在寻找一种方法来替代“取代我!”与“我想取代那个人!”，当我点击“我想取代那个人!”。

到目前为止，一切都很好，但是当我点击“我想替换那个人!”时，<div> 中的文本不会改变。

带有“替换我!”的组件:

class TextBox extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    content: 'Replace me!'
  };
  this.changeContent = this.changeContent.bind(this);
}

changeContent (newContent) {
  //code to change 'Replace me!' with 'I wanna replace that guy!'
  //when I click 'I wanna replace that guy!'
  this.setState({
    content: newContent
  });
}

render() {
  return (
    <div>
      <div className="content_box">{this.state.content}</div>
      <Content onClick={this.changeContent}></Content>
    </div>
  );
}
}

ReactDOM.render(
  <TextBox />, 
  document.getElementById("root")
);

带有“我想取代那个人!”的组件:

export class Content extends React.Component {
  constructor(props) {
  super(props);

  this.handleClick = this.handleClick.bind(this);
}

handleClick(e) {
  const content = e.target.value;
  this.props.onClick(content);
}

render() {
  return (
    <div onClick={this.handleClick} value="heeey" className="text_color">
      I wanna replace that guy!
    </div>
  );
}
}

export default Content;

谢谢你的帮助。

Answer 1

在这段代码中:

handleClick(e) {
  const content = e.target.value;
  this.props.onClick(content);
}

render() {
  return (
    <div onClick={this.handleClick} value="heeey" className="text_color">
      I wanna replace that guy!
    </div>
  );
}

您实际上并没有将任何值传递给 handleClick。

基本上，您希望保持 div 的内容处于状态，然后对其进行修改。

工作示例 here .