通过在同级之间传递数据来更改CSS

Question

我有两个子组件。第一个孩子是一个形象。第二个孩子是搜索输入。在输入字段中键入内容时，我希望图像隐藏起来。将数据从第二个孩子传递到父母很顺利。但是第一个孩子仍然出现...

Parent: 
class Main extends React.Component {
   constructor() {
        super();
        this.state = {
          displayValue: 'block'
        };
      }

  hideImage = () => () => {
    alert('You pressed a key, now the apple should be gone')
    this.setState ({
      displayValue: 'none'
    });
  };
  render() {
    return (
      <div>
      <Image />
      <Search hideImage={this.hideImage()}/>
      </div>

    );
  }
}

ReactDOM.render(<Main />, document.getElementById('root'));

First Child:
export default class Image extends Component {
    render() {
        return (
            <div>
            <img style={{display : this.props.displayValue}} src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTAxoq2YSBjoS0Lo3-zfqghoyNzZ9jHxoOc5xuFBoopMtKP6n4B"></img>
            </div>
        )
    }
} 

Second Child: 
export default class Search extends Component {
    render() {
        return (
            <div>
            <input onInput={this.props.hideImage} placeholder="Search someting"></input>
            </div>
        )
    }
}

Answer 1

您必须将displayValue状态作为道具传递给Image组件。另外，您必须传递hideImage函数，而不必使用两个方括号将其初始化。下面的代码将为您工作。

class Main extends React.Component {
   constructor() {
        super();
        this.state = {
          displayValue: 'block'
        };
      }

  hideImage = () => () => {
    alert('You pressed a key, now the apple should be gone')
    this.setState ({
      displayValue: 'none'
    });
  };
  render() {
    return (
      <div>
      <Image displayValue={this.state.displayValue}/>
      <Search hideImage={this.hideImage}/>
      </div>

    );
  }
}

Answer 2

您刚刚有几次错别字。

class Image extends React.Component {
      render() {
        return (
          <div>
            <img
              style={{ display: this.props.displayValue }}
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTAxoq2YSBjoS0Lo3-zfqghoyNzZ9jHxoOc5xuFBoopMtKP6n4B"
              alt="altprop"
            />
          </div>
        );
      }
}

// Second Child:
class Search extends React.Component {
  render() {
    return (
      <div>
        <input onInput={this.props.hideImage} placeholder="Search someting" />
      </div>
    );
  }
}
class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      displayValue: "block"
    };

  }

  hideImage(e) {
    e.preventDefault();
    alert("You pressed a key, now the apple should be gone");
    this.setState({
      displayValue: "none"
    });
  };

  render() {
    return (
      <div>
        <Image displayValue={this.state.displayValue}/>
        <Search hideImage={this.hideImage.bind(this)} />
      </div>
    );
  }
}

Answer 3

像这样调用您的图片组件

<Image displayValue={this.state.displayValue} />

然后它应该已经可以工作了，但是这是编写代码的较短方法。

// First Child:
const Image = ({displayValue}) => <div>
  <img alt='' style={{display : displayValue}} src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTAxoq2YSBjoS0Lo3-zfqghoyNzZ9jHxoOc5xuFBoopMtKP6n4B"></img>
</div>