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时，我使用javascript来显示或隐藏我的#main react组件，该组件有一个输入组件，默认的name属性为空字符串。

如果我为输入键入了一些值，例如＆＃39; abc＆＃39;，然后再次点击#btn隐藏#main，然后再次点击#btn以显示#main。＆＃39; abc＆＃ 39;还在那里。

每次单击#btn以显示#main时，如何让我的组件重新呈现默认状态？

Answer 1

这就是你想要的吗？

＆＃13;

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

＆＃13;

.hidden {
	visibility: hidden;
}

＆＃13;

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

＆＃13;

Answer 2

您正在将#React应用程序挂载到#main元素。 React上下文不会知道任何内容。如果要在按钮单击时显示或隐藏组件，则应在React组件中包含#btn元素。这样的事情应该有效：

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

如何从hide中显示我的react组件并再次重新渲染？

2 个答案: