Question

所以我有一个上传页面，上面有一个子组件Popup，这是一个弹出菜单。这里的目标是单击“上载”页面上的“提交”按钮，并更改Popup组件的CSS属性以使其可见。我对ReactJS相当新，我在这里找不到一个能让我到达我需要的地方的问题。

这是上传页面组件。具有提交（）onClick的按钮：

schema.sql

这是弹出组件。我在这里定义状态，但我不知道如何从父组件更改它：（

class Upload extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
            submitted: false,
        };
        this.submit = this.submit.bind(this);
    }

    submit() {
      this.setState({
        submitWrapper: '500px',
        submitDetails: '300px',
        submitButton: 'block',
        opacity: '1',
        submitted: true
      });
      console.log(this.state)
    }



  render() {
    return(

          ....

           <button
            id="upload-submit"
            onClick={this.submit}>
            Submit
          </button>

           ....

           <Popup></Popup>

我觉得我在这里错过了一些令人难以置信的东西。

Answer 1

虽然拥有Component-based架构，但您的样式与组件本身位于同一位置是显而易见的。

因此，不是从父级传递样式，而是使用任何css-in-js库更好地管理样式，然后有条件地应用className。

因此，对于你的PopUp，你有一个open道具，并从Parent设置。然后Popup可以根据道具应用它自己的样式。

<强>父

render(){
  return(){
     <PopUp open={this.state.open}/>
  }
}

<强>弹出

render(){
  return(){
    <div className={this.props.open ? 'popUpShow': 'popUpHide' }>
    </div>
  }
}

OR（与css-in-js lib）

render(){
  return(){
    <div className={this.props.open ? classes.popUpShow': classes.popUpHide }>
    </div>
  }
}

希望这有帮助！

Answer 2

您希望父组件的提交功能覆盖子组件的状态。您将onClick={this.submit}>作为道具传递给按钮组件，但<Popup></Popup>组件未收到此功能。添加它：

<Popup onClick={this.submit}></Popup>

此外，如果您希望父组件上的函数覆盖子组件上的状态，那么在您的子组件上，此行onClick={this.state.submitWrapper = '0px'}>应为onClick={this.props.onClick}。

更改子组件的状态（css属性）

2 个答案: