Question

我有这个简单的应用程序，我正在寻找一种解决方案，将点击从文本连接到图像。在这里，点击是不可取的，只需点击一次即可显示图像。首先，我认为为图像定义状态是有意义的，但说实话，我不是认为是最好的做法。

对于这种情况，哪种解决方案最好？我酌情提供任何提供的提示和解决方案。

谢谢。

＆＃13;

// IMAGE COMPONENT
class Image extends React.Component {
  render() {
    return (
      <div>
        <img
          alt=""
          src="https://media.makeameme.org/created/what-if-I-y0ivox.jpg"
        />
      </div>
    );
  }
}

// TEXT COMPONENT
class Text extends React.Component {
  imageClick() {
    console.log('click');
  }

  render() {
    return (
      <div>
        <p onClick={this.imageClick}>If you click me, Morpheus will appear!</p>
      </div>
    )
  }
}

// PARENT COMPONENT
class App extends React.Component {
  render () {
    return (
      <div>
        <Text onClick={this.imageClick} />
        <Image src={this.props.src} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
	<title>React App</title>
</head>

<body>
	<div id="app"></div>
</body>

</html>

＆＃13;

Answer 1

使用父组件设置图像的可见性。

// IMAGE COMPONENT
class Image extends React.Component {
  render() {
    return (
      <div>
        <img
          alt=""
          src="https://media.makeameme.org/created/what-if-I-y0ivox.jpg"
        />
      </div>
    );
  }
}

// TEXT COMPONENT
class Text extends React.Component {


  render() {
    return (
      <div>
        <p onClick={() => this.props.onClick()}>If you click me, Morpheus will appear!</p>
      </div>
    )
  }
}

// PARENT COMPONENT
class App extends React.Component {
  state = {
    visible : false,
   }
   toggleVisible = () => this.setState({ visible : !this.state.visible });

  render () {
  const { visible } = this.state;
    return (
      <div>
        <Text onClick={this.toggleVisible} />
        {
          visible 
          && <Image src={this.props.src} />
        }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("#app"));

React - 如何将点击文本上的道具传递给图像

1 个答案: