反応コンポーネントを非表示にして再表示するにはどうすればよいですか？ここ

Question

は私のhtmlコードはここ

<div id="btn">Click</div> 
<div id="main"> 

</div> 

である私のcomponent.jsファイルコード

class Main extends Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     name : "" 
    } 
    } 

    render(){ 
    <input type="text" className="form-control" id="userName" defaultValue={this.state.name}></input> 
    } 


} 

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

私は#btnをクリックすると、私は私の#mainを表示または非表示にJavaScriptを使用している持つコンポーネントを反応させます入力コンポーネントと名前のデフォルト状態は空の文字列です。

[abc]のように入力した値を入力して#btnをもう一度クリックすると#mainが非表示になり、#btnを再度クリックすると＃mainが表示されます。

#mainを表示するために#btnをクリックするたびに、コンポーネントをデフォルトの状態で再レンダリングする方法を教えてください。

Answer 1

これはあなたが欲しいものですか？

class Main extends React.Component { 
 
    constructor(props, context) { 
 
    super(props, context); 
 
    this.state = { 
 
     name : "" 
 
    }; 
 
    } 
 
\t 
 
    handleInputChange =() => { 
 
    const { value } = this.refs.name; 
 
\t this.setState({name: value}); 
 
    }; 
 

 
    handleBtnClick =() => { 
 
\t const target = this.refs.name; 
 
    target.classList.toggle('hidden'); 
 
    }; 
 

 
    render() { 
 
    return (
 
\t <div> 
 
\t  <p className="form-control"> 
 
\t \t <input 
 
\t \t type="text" 
 
\t \t id="userName" 
 
\t \t ref="name" 
 
\t \t value={this.state.name} 
 
\t \t onChange={this.handleInputChange} 
 
\t \t /> 
 
\t  </p> 
 
\t  <button onClick={this.handleBtnClick}>button</button> 
 
\t </div> 
 
\t); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
\t <Main />, 
 
\t document.getElementById('main') 
 
);

.hidden { 
 
\t visibility: hidden; 
 
}

<div id="main"></div> 
 
<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>

Answer 2

あなたは#main要素であなたのリアクトアプリケーションをマウントしています。 Reactコンテキストは、それ以外は何も知らないでしょう。ボタンクリック時にコンポーネントを表示または非表示にする場合は、#btn要素をReactコンポーネントに含める必要があります。このようなものはうまくいくはずです：

<!-- Your html file --> 
<div id="main"></div> 

// component.js file 
/* Use a wrapper class to control when you want components to render */ 
class WrapperMain extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { showMain: true }; 
    } 

    handleBtnClick() { 
     // Calling setState forces a re-render 
     this.setState({ showMain: !this.state.showMain }); 
    } 

    render() { 
     return (
      <div> 
       {/* Bring your click div into the React context so that it 
       can better control the rendering of other React components */} 
       <div id="btn" onClick={this.handleBtnClick.bind(this)}> 
        Click 
       </div> 

       {/* You can use an anonymous function to allow a check for 
       whether the <Main /> component should be shown or not */} 
       {(() => { 
        if (this.state.showMain) { 
         return <Main /> 
        } 
       })()} 
      </div> 
     ) 
    } 
} 

class Main extends Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = { name : "" } 
    } 

    render() { 
     return (
      <div> 
       <input 
       type="text" 
       className="form-control" 
       id="userName" 
       defaultValue={this.state.name}></input> 
      </div> 
     ); 
    } 


} 

ReactDOM.render(<WrapperMain />, document.getElementById("main"));