다른 구성 요소의 JS 참조 기능을 반응합니다
-
22-12-2019 - |
문제
다른 구성 요소의 상태를 참조하거나 영향을 미치는 다른 구성 요소를 통해 렌더링 된 버튼을 얻으려고합니다.
var Inputs = React.createClass({
getInitialState: function(){
return {count: 1};
},
add: function(){
this.setState({
count: this.state.count + 1
});
},
render: function(){
var items = [];
var inputs;
for (var i = 0; i < this.state.count; i++){
items.push(<input type="text" name={[i]} />);
items.push(<br />);
}
return (
<div className="col-md-9">
<form action="/" method="post" name="form1">
{items}
<input type="submit" className="btn btn-success" value="Submit Form" />
</form>
</div>
);
}
});
.
입력에서 추가 기능에 액세스 할 수있는 새 구성 요소를 작성하고 싶습니다.다음과 같이 Inputs.add
로 직접 참조하려고했습니다.
var Add = React.createClass({
render: function(){
return (
<input type="button" className="btn" value="Add an Input" onClick={Inputs.add} />
);
}
});
.
그러나 그것은 작동하지 않았습니다.다른 구성 요소를 통해 구성 요소의 기능에 액세스하거나 다른 구성 요소를 통해 구성 요소의 상태에 영향을 줄 수 있습니까?고마워.
해결책
상태를 관리 할 책임이있는 부모 구성 요소를 만들어주는 다음 주를 소품으로 하위 구성 요소로 눌러주십시오.
/** @jsx React.DOM */
var Inputs = React.createClass({
render: function () {
var items = [];
var inputs;
for (var i = 0; i < this.props.count; i++) {
items.push( <input type="text" name={[i]} />);
items.push(<br />);
}
return (
<div className = "col-md-9">
<form action = "/" method = "post" name = "form1">
{items}
<input type="submit" className="btn btn-success" value = "Submit Form" />
</form>
</div>
);
}
});
var Add = React.createClass({
render: function () {
return (<input type = "button" className="btn" value="Add an Input" onClick={this.props.fnClick}/> );
}
});
var Parent = React.createClass({
getInitialState: function(){
return {count:1}
},
addInput: function(){
var newCount = this.state.count + 1;
this.setState({count: newCount});
},
render: function(){
return (
<div>
<Inputs count={this.state.count}></Inputs>
<Add fnClick={this.addInput}/>
</div>
);
}
});
React.renderComponent(<Parent></Parent> , document.body);
.
다른 팁
renderComponent
의 반환 값에서 함수를 호출 할 수 있습니다.
var Inputs = React.createClass({…});
var myInputs = React.renderComponent(Inputs);
myInputs.add();
.
반응 이외의 반응 구성 요소 인스턴스에 대한 핸들을 얻는 유일한 방법은 React.RenderCompponent의 반환 값을 저장하는 것입니다. 소스 .
제휴하지 않습니다 StackOverflow