如何从隐藏和重新渲染中显示我的react组件？

Question

Here is my html code

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

</div>

Here is my component.js file code

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'));

When I click on #btn, I use javascript to show or hide my #main react component which has a input component and the default state of name is empty string.

If I type some value for my input , like 'abc', and then click #btn again to hide #main, then click #btn again to show #main.The 'abc' still there.

How can I have my component re-render base on the default state every time I click #btn to show #main?

Answer 1

is this what you want?

 class Main extends React.Component { constructor(props, context) { super(props, context); this.state = { name : "" }; } handleInputChange = () => { const { value } = this.refs.name; this.setState({name: value}); }; handleBtnClick = () => { const target = this.refs.name; target.classList.toggle('hidden'); }; render() { return ( <div> <p className="form-control"> <input type="text" id="userName" ref="name" value={this.state.name} onChange={this.handleInputChange} /> </p> <button onClick={this.handleBtnClick}>button</button> </div> ); } } ReactDOM.render( <Main />, document.getElementById('main') ); 

 .hidden { 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

You are mounting your React application at the #main element. The React context won't know anything outside of that. If you would like to show or hide components on button click, you should include your #btn element in your React component. Something like this should work:

<!-- 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"));