Javascript 反应-单击div text，从另一个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;

class文本框扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
内容：“替换我！”
};
this.changeContent=this.changeContent.bind（this）；
}
更改内容（新内容）{
//将“替换我！”更改为“我想替换那个家伙！”
//当我点击“我想替换那个家伙！”
这是我的国家({
内容：新内容
});
}
render（）{
返回(
{this.state.content}
);
}
}
ReactDOM.render(
, 
document.getElementById（“根”）
);

带有的组件“我想替换那个家伙！”：

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;

导出类内容扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
常量内容=e.目标值；
this.props.onClick（content）；
}
render（）{
返回(
我要替换那个家伙！
);
}
}
导出默认内容；

感谢您的帮助。

在此代码中：

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（e）{
常量内容=e.目标值；
this.props.onClick（content）；
}
render（）{
返回(
我要替换那个家伙！
);
}

实际上，您没有将任何值传递给

handleClick

您基本上希望保持div的内容处于状态，然后修改它

工作示例。

在此代码中：

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（e）{
常量内容=e.目标值；
this.props.onClick（content）；
}
render（）{
返回(
我要替换那个家伙！
);
}

实际上，您没有将任何值传递给

handleClick

您基本上希望保持div的内容处于状态，然后修改它

工作示例。

请尝试此操作

将e.target.innerHTML传递给内容。e、 如果“我想换掉那个家伙”，target.value就行了放置在文本框中

请试试这个

---

---

将e.target.innerHTML传递给内容。e、 如果“我想换掉那个家伙”，target.value就行了放置在文本框中

而不是

e.target.value

，你应该使用

e.target.textContent

而不是

e.target.value

，你应该使用

e.target.textContent
你的意思是
？是的。E.Toal.值将考虑元素AS或表单元素。但在本例中，元素是“div”。所以获取innerHTML应该是一个合适的方法。你是说
？是的。E.Toal.值将考虑元素AS或表单元素。但在本例中，元素是“div”。因此，获取innerHTML应该是一个合适的方法。
e.target.value
用于从输入中获取值，而不是div的文本内容（参见下面的答案）。另外，最好不要使用“onClick”作为子组件的属性名，因为它有特定的含义。传递它的名称：
，然后在孩子的
手柄点击（e）
函数：
this.props.changeContent（content）
。谢谢大家！完美工作的不同解决方案！不要忘记标记正确答案：）
e.target.value
用于从输入中获取值，而不是div的文本内容（请参见下面的答案）。另外，最好不要使用“onClick”作为子组件的属性名，因为它有特定的含义。传递它的名称：
，然后在孩子的
手柄点击（e）
函数：
this.props.changeContent（content）
。谢谢大家！完美工作的不同解决方案！别忘了标出正确的答案：）很好的解决方案！但是我有一个问题要问你，如果可以的话：假设我有一个数组，我想通过click事件传递相同数组的位。它是否类似于：
this.state={content:this.props.content}
？这有意义吗？我不知道你说的相同数组的位是什么意思。你能澄清一下吗？假设我有一个这样的数组：数组就像一个文件树，我想知道的是我应该如何传递对象。例如，我想在我刚刚开发的框中只显示以下内容：
{“type”：“directory”，“name”：“/bin”，“contents”：[{“type”：“file”，“name”：“/bin/greet”}]}
那么您只需传递
数据。不管怎样。还有什么
，它的工作方式都是一样的。类似于
this.props.data
？很好的解决方案！但是我有一个问题要问你，如果可以的话：假设我有一个数组，我想通过click事件传递相同数组的位。它是否类似于：
this.state={content:this.props.content}
？这有意义吗？我不知道你说的相同数组的位是什么意思。你能澄清一下吗？假设我有一个这样的数组：数组就像一个文件树，我想知道的是我应该如何传递对象。例如，我想在我刚刚开发的框中只显示以下内容：
{“type”：“directory”，“name”：“/bin”，“contents”：[{“type”：“file”，“name”：“../bin/greet”}]}
那么你只需要传递
数据。不管什么。其他什么
，它的工作原理是一样的。类似于
这个.props.data
？这并不能回答这个问题。若要评论或要求作者澄清，请在其评论下方留下评论