Question

我是React JS的新手，所以我很抱歉提前回答了这个问题。

我正在这里开发一个组件（ https://codesandbox.io/s/8pkl8w6xy0 ），其中我有一个<div>文本。在此<div>之外，有另一个文字。

我正在寻找一种方法来替换＆＃34;替换我！＆＃34;和＃34;我想要取代那个人！＆＃34;，当我点击时，＆＃34;我想要取代那个人！＆＃34;。

到目前为止，非常好，但当我点击＆＃34;我想要替换那个人！＆＃34;，<div>内的文字不会改变。

＆＃34;替换我的组件！＆＃34; ：

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")
);

＆＃34;我要替换那个人的组件！＆＃34; ：

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。

Answer 2

请试试这个。 https://codesandbox.io/s/kok29jp04o

  handleClick(e) {
    const content = e.target.innerHTML;  //Since it is an element it should be `.innerHTML`
    this.props.onClick(content);
  }

将e.target.innerHTML传递给内容。如果我想替换那个人，那么e.target.value会工作！＆＃39;放在文本框内。

Answer 3

而不是e.target.value，您应该使用e.target.textContent。

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

3 个答案: