Блог

Вот мой 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, я использую javascript для отображения или скрытия моего компонента #main react, который имеет компонент ввода, а состояние имени по умолчанию — пустая строка.

Если я введу некоторое значение для своего ввода, например ‘abc’, а затем снова нажму #btn, чтобы скрыть #main, затем снова нажмите #btn, чтобы показать #main .’abc’ все еще там.

Как я могу заставить свой компонент повторно отображать базу в состоянии по умолчанию каждый раз, когда я нажимаю #btn, чтобы показать #main?

это то, что вы хотите?

 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>  

Вы монтируете свое приложение React в элементе #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"));