最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React - on click div text, change text from another div - Stack Overflow

programmeradmin1浏览0评论

I'm new to React JS, so I'm sorry in advance for the question.

I am developing a ponent here () where I have a <div> with text inside. Outside of this <div> there is another text.

I'm looking to find a way to substitute "Replace me!" with "I wanna replace that guy!", when I click on "I wanna replace that guy!".

So far, so good but when I click on "I wanna replace that guy!", the text inside the <div> doesn't change.

The ponent with "Replace me!":

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

The ponent with "I wanna replace that guy!":

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;

Thank you for the help.

I'm new to React JS, so I'm sorry in advance for the question.

I am developing a ponent here (https://codesandbox.io/s/8pkl8w6xy0) where I have a <div> with text inside. Outside of this <div> there is another text.

I'm looking to find a way to substitute "Replace me!" with "I wanna replace that guy!", when I click on "I wanna replace that guy!".

So far, so good but when I click on "I wanna replace that guy!", the text inside the <div> doesn't change.

The ponent with "Replace me!":

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

The ponent with "I wanna replace that guy!":

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;

Thank you for the help.

Share Improve this question asked Apr 26, 2018 at 13:13 RCohenRCohen 2,00210 gold badges27 silver badges45 bronze badges 3
  • e.target.value is used for getting values from inputs, not the text content of a div (see answers below). Also, it's better not to use 'onClick' as a property name for a child ponent, since it has a specific meaning. Pass it with its name: <Content changeContent={this.changeContent}/>, then in the child's handleClick(e) function : this.props.changeContent(content). – Jayce444 Commented Apr 26, 2018 at 13:28
  • 1 Thanks everyone! Different solutions that work perfectly! – RCohen Commented Apr 26, 2018 at 13:43
  • Don't forget to mark the correct answer :) – Jayce444 Commented Apr 26, 2018 at 14:39
Add a ment  | 

3 Answers 3

Reset to default 2

In this code:

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

You're not actually passing any value to the handleClick.

You basically want to keep the content of your div in state, and then modify that.

Working example here.

Please try this. 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);
  }

Pass the e.target.innerHTML to the content. e.target.value would've worked if the 'I wanna replace that guy!' is placed inside a text box.

instead of e.target.value, you should use e.target.textContent.

发布评论

评论列表(0)

  1. 暂无评论