Question

我有一类说NewVersionPopUp（单击添加按钮时被调用），它有自己的构造函数。我有另一个类ApplicationView，它有自己的构造函数。这俩类在同一文件中。现在在ApplicationView中，我有一种onClose方法当我单击该弹出窗口的关闭按钮（模式）时，它将被调用。在关闭时我想将某些变量设置为false，这些变量在NewVersionPopUp类构造函数中定义。我正在做的onClose

this.setState({
  nameValid: false,
  descValid: false,
  fileValid: false
});

在控制台上，由于nameValid未定义，我遇到错误。因为nameValid，descValid，fileValid是没有在声明onClose的同一类中定义。因此，如何将NewVersionPopUp的此变量传递给ApplicationView 类，以便我可以使用onClose函数。而且类的构造函数也只能加载一次吗？它不是每次都被调用当我单击添加按钮时。

class ApplicationView extends Component {
  constructor(props) {
    super(props);
    this.state = {
        message: 'welcome'
    };
  onClosePopup () {
    this.setState({
            address: '',
            nameValid: false,
            descValid: false
        });
  }
  render() {
    return (
      <div>
        <button onClick={toggleChildMenu.bind(this)}>
          Toggle Menu from Parent
        </button>
        <NewVersionPopUp onClose={this.onClosePopup}/>
      </div>
    );
  }
}



class NewVersionPopUp extends React.Component {
    super(props);
    this.state = {
        nameValid: false,
        descValid: false
    };

    validateForm() {
        // check if name and description is valid and then set nameValid, descValid => true
    }
    render() {
        return (<div><button onClick={() => onSubmit}>Push me</button></div>
        <div><button isDisabled={!nameValid && !descValid} onClick={() => onClose}>Close</button></div>
        )
    }
}

Answer 1

在将组件装入DOM之前，将调用该组件的构造函数。您需要在这里做什么：

为这些组件做父母
将道具传递给孩子/兄弟姐妹（取决于您的逻辑是否在父组件中编写）

因此您可以轻松地在ApplicationView中访问这些道具。您只需在组件之间建立关系，因为它们不在树中。

React类的构造函数仅被调用一次

1 个答案: