每次单击按钮时,我的应用程序都会从服务器获取新数据。使用componentDidMount
加载页面时,它还会加载新数据。然后使用placeholder={this.state.response}
将其显示在我的输入框占位符上。
我想使用服务器中的更新数据重新呈现占位符内容。
Home.js
export default class Home extends Component {
state = {
response: ''
};
componentDidMount() {
this.callApi()
.then(res => this.setState({ response: res.chunk }))
.catch(err => console.log(err));
}
callApi = async () => {
const response = await fetch('/password-api');
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
};
render() {
return (
<div className="App">
<Header />
<Container>
<Row>
<Col sm="12" md={{ size: 8, offset: 2 }}>
<FormGroup>
<Input className="password-area" type="textarea" name="text" id="exampleText" placeholder={this.state.response}/>
</FormGroup>
</Col>
</Row>
<Row>
<Col sm="12" md={{ size: 8, offset: 2 }}>
<button onClick={this.callApi} id="get-pass-button" className="button">
Generate Password
</button>
</Col>
</Row>
</Container>
<Footer />
</div>
);
}
}
答案 0 :(得分:2)
占位符绑定到this.state.response
,因此只要此特定状态发生更改,占位符就会更新。占位符对状态更改做出反应。
您的componentDidMount()
调用callApi()
,.then()
使用返回值设置状态。
您的onClick
对返回值callApi()
无效。解决方案可能如下所示。
handleClick = () => {
this.callApi()
.then(res => this.setState({ response: res.chunk }))
};
在您的render()
方法中:
<button
onClick={this.handleClick}
id="get-pass-button"
className="button"
>
Generate Password
</button>
答案 1 :(得分:0)
在组件中添加handlePassButtonClick
方法,如下所示:
export default class Home extends Component {
state = {
response: ''
};
componentDidMount() {
this.callApi()
.then(res => this.setState({ response: res.chunk }))
.catch(err => console.log(err));
}
callApi = async () => {
const response = await fetch('/password-api');
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
};
handlePassButtonClick = async () => {
const response = await this.callApi();
this.setState({ response });
}
render() {
return (
<div className="App">
<Header />
<Container>
<Row>
<Col sm="12" md={{ size: 8, offset: 2 }}>
<FormGroup>
<Input className="password-area" type="textarea" name="text" id="exampleText" placeholder={this.state.response}/>
</FormGroup>
</Col>
</Row>
<Row>
<Col sm="12" md={{ size: 8, offset: 2 }}>
<button onClick={this.handlePassButtonClick} id="get-pass-button" className="button">
Generate Password
</button>
</Col>
</Row>
</Container>
<Footer />
</div>
);
}
}
在按钮点击上附加handlePassButtonClick
。