Question

每次单击按钮时，我的应用程序都会从服务器获取新数据。使用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>
    );
  }
}

Answer 1

占位符绑定到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>

Answer 2

在组件中添加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。

反应如何在按钮单击时重新呈现占位符

2 个答案: