티스토리 뷰
이것이 당신이 원하는 것입니까?
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>스 니펫 확장
#main 요소에 React 애플리케이션을 탑재하고 있습니다. 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"));
출처
https://stackoverflow.com/questions/39969990