如何通过更改状态来更改 URL

Question

我有一个父母和两个孩子。 我正在尝试通过按下按钮来更改图像 url，但没有成功......我似乎无法将数据从按钮子级传递到图像子级 ..

家长：

class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      isHidden: true,
      imageUrl: ""
    };
  }
  showImage = () => () => {
    this.setState({
      imageUrl:
        "https://cdn.pixabay.com/photo/2020/03/19/04/58/coconut-trees-4946270_960_720.jpg"
    });
  };

  render() {
    return (
      <div>
        <ImageButton onClick={this.showImage()} />
        <Image />
      </div>
    );
  }
}

按钮子：

export default class ImageButton extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.showImage}>New image</button>
      </div>
    );
  }
}

图像儿童：

export default class ProfilePicture extends Component {
  render() {
    return <img src="{props.imageUrl}" />;
  }
}

Answer 1

它有效，注意一些变化。 我希望它会帮助你。

家长：

class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      isHidden: true,
      imageUrl: ""
    };
  }

  showImage = () => () => {
    this.setState({
      imageUrl:
        "https://cdn.pixabay.com/photo/2020/03/19/04/58/coconut-trees-4946270_960_720.jpg"
    });
  };

  render() {
    return (
      <div>
        <ImageButton clicked={this.showImage()} />
        <ProfilePicture imageUrl={this.state.imageUrl} />
      </div>
    );
  }
}

按钮子：

export default class ImageButton extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.clicked}>New image</button>
      </div>
    );
  }
}

图像儿童：

export default class ProfilePicture extends Component {
  render() {
    return <img src={this.props.imageUrl} />;
  }
}