1
Я пытаюсь отобразить компонент Need, когда мы нажимаем на ссылку «Добавить». ниже мой код для основного компонента:рендеринг реагирует на компоненты при нажатии
import React from 'react';
import ReactDOM from 'react-dom';
import { Hand } from './hand.js';
import { Need } from './need.js';
class App extends React.Component{
constructor() {
super();
this.processHand = this.processHand.bind(this);
this.addNeed = this.addNeed.bind(this);
this.state = {
inhandMoney : " ",
renderNeed: false,
}
}
processHand(e){
e.preventDefault();
const handMoneyReceived = this.handMoney.value;
this.setState({
inhandMoney: handMoneyReceived
});
}
addNeed(e){
e.preventDefault();
this.setState({
renderNeed:true
});
}
render(){
const passNeed = (
<Need/>
);
return(
<div>
<div className ="hand">
<form onSubmit = {this.processHand}>
<input type="text" ref= {ref => this.handMoney = ref}/>
<input type="submit"/>
</form>
<Hand handMoney = {this.state.inhandMoney}/>
<Need/>
</div>
{this.state.renderNeed ? passNeed : null}
<a href="#" className="add" onClick = {this.addNeed}>add</a>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('container'));
и ниже моя потребность компонент только в случае, если:
import React from 'react';
export class Need extends React.Component{
constructor() {
super();
this.processNeed = this.processNeed.bind(this);
this.state ={
why: " ",
howMuch: 0
}
}
processNeed(e){
e.preventDefault();
const why=this.why.value;
const howMuch=this.howMuch.value;
this.setState({
why:why,
howMuch:howMuch
});
}
render(){
return(
<div className ="need">
<form onSubmit = {this.processNeed}>
<input type="text" ref= {ref => this.why = ref}/>
<input type="text" ref= {ref => this.howMuch = ref}/>
<input type="submit"/>
</form>
<div>
<h1>{this.state.why}</h1>
<h1>{this.state.howMuch}</h1>
</div>
</div>
)
}
}
я достигнуть того, что я пытаюсь достичь на первый щелчок на оный ссылка, то есть сначала компонент потребности получает визуализацию без каких-либо условий. И когда я нажимаю «добавить», компонент Need снова отображается, но когда я нажимаю ссылку «добавить» во второй раз, я не вижу никаких изменений. почему это так, я хочу отображать компонент Need каждый раз, когда я нажимаю ссылку «добавить».
методы класса должны быть "связаны". @john_omalley имеет ответ ниже. См. Http://stackoverflow.com/a/30721098/368697 для привязки методов класса, которые вы собираетесь использовать в качестве обратных вызовов. –
Вы получили решение или все еще сталкиваетесь с проблемой? –