Question

我在GitHub页面上有一个简单的reactjs网站。它列出了文章，比如reddit中的feed。我有一个AddArticle要求，其中，点击＆＃39;添加文章＆＃39;页面底部的按钮，包含此按钮的Div必须隐藏，并且必须显示用于添加文章详细信息的新Div（包含2个文本框和名为＆＃39; Submit＆＃39;的按钮）。点击“提交”后即可按钮，早期的Div必须重新出现，新Div被隐藏。

以下是我目前使用的代码（不完整）。请仔细阅读并提供有关问题的任何见解。感谢。

＆＃13;

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.onClickSubmitButton = this.onClickSubmitButton.bind(this);

    this.state = { 
      showing: false 
    };
  }

  onClickSubmitButton(){
    console.log('test-2');

    this.setState(
      { 
        showing: true 
      }
    );
  }

  render() {
    const { showing } = this.state;
    return (
      <div id="div_2">
      <br/>
      <input type="text" placeholder="Add the article title here" className="block_text"></input>
      <br/><br/>
      <input type="text" placeholder="Add the article text here" className="block_text"></input>
      <br/><br/>
      <button 
        type="button" 
        onClick={() => 
        this.onClickSubmitButton()}
      >
        Submit
      </button>
      { showing 
                    ? <div>This is visible</div>
                    : null
      }

    </div>
    );
  }
}

export default class AddArticle extends React.Component {
  constructor(props) {
    super(props);

    this.onClickAddButton = this.onClickAddButton.bind(this);

    this.state = {
      error: undefined,
      tempArticle: undefined,
      childVisible: false,
      parentVisible: true
    };
  }

  onClickAddButton(){
    console.log('test-1');

    this.setState(
      prevState => (
        { 
          childVisible: !prevState.childVisible,
          parentVisible: !prevState.parentVisible 
        }
      )
    );
    
  }

  // this is the render method
  render() {
    
    return (
        
          <div id="div_1">
            <br/><br/>
            <button 
              type="button" 
              onClick={() => 
              this.onClickAddButton()}
            >
              Add Article
            </button>
            {
            
            this.state.childVisible
            ? <Child />
            : null

            }
          </div>

    );

  }
}

＆＃13;

<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>

＆＃13;

Answer 1

这是一个解决方案。您应该刚刚将道具发送到<Child />组件

DEMO

在reactjs中2个div的可见性之间切换

1 个答案: