使用 axios 向输入 ReactJS 中的每个更改发送数据答案

【问题标题】：Send datas with axios to each change in a input ReactJS使用 axios 向输入 ReactJS 中的每个更改发送数据
【发布时间】：2019-11-26 14:48:07
【问题描述】：

我写这个小话题是因为我有一个小问题。（本主题中的代码不是我的真实代码，只是一个例子）。

我想将输入 name_contact 内容发送到每个更改。但我只能用button 发送它。所以我的问题是：是否可以？我该怎么做？

    export default class FormPage extends Component {
     constructor(props) {
      super(props);
      this.state = initialState;
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleChange = this.handleChange.bind(this);
     }

     removeClick(i){
      let users = [...this.state.users];
      users.splice(i, 1);
      this.setState({ users });
     }

     showMessage = (bool) => {
      setTimeout(() => {
       this.setState({
        showMessage: true
       });
      }, 2000);
     if (this.state.Showing) return;
      this.setState({ Show: true, Showing: true });
     setTimeout(() => {
      this.setState({ Show: false, Showing: false });
      }, 2000);
     }

     showMessageFalse = (bool) => {
      this.setState({
       showMessage: false
       });
      this.setState(initialState);
     }

     handleChange(event) {
      const InputValue = event.target.value;
      const stateField = event.target.name;
      this.setState({
        [stateField]: InputValue,
      });
      console.log(this.state);
     }

     async handleSubmit(event) {
      this.setState({ loading: true });

      setTimeout(() => {
       this.setState({ loading: false });
      }, 2000);

     event.preventDefault();
     const {
       name_contact='',
     } = this.state;

     await axios.post(
      ' MY_endpoint API',
      {
        name: `${name_contact}`);
      }

  render() {

    const { loading } = this.state;

    return (
      <div>

        <ExpansionPanel title="Contacts" expandedTitle="Contacts" titleIcon="done_all" ><div>
          <Container>
            <div id="normal"><label id='title2'>Detail du contact</label></div><br/>
              <Row align="center">
                <Col id= "color" sm={3}> <label> Name: </label></Col> <Col id= "color" sm={3}><Input placeholder="Nom complet" type="string" name="name_contact" value={this.state.name_contact} onChange={this.handleChange}/><br /> </Col>
              </Row>
          </Container>
          </div>
        </ExpansionPanel>

      <form onSubmit={this.handleSubmit}>
      <br /><br /><div id="deb"><Button type="submit" value="Show" onClick={this.showMessageFalse.bind(null, true)} > Update </Button></div>
      </form>
    </div>
    );
  }
}

我尝试在handleChange 中调用handleSubmit，但没有成功。（你不需要给我很好的答案，但是一首曲目会让我很开心）谢谢，

【问题讨论】：

所以你想在每次用户输入 ANY 键时向你的服务器发送一个请求？
@r3dst0rm 基本上，是的。如果有人在此输入中执行任何键，我想发送输入。我正在这样做，当我单击按钮时，axios 正在完成这项工作。但它不适用于输入中的每个新键
将handleChange(event) { 替换为handleChange = (event) => {，这样您就可以正确绑定此值，并且它应该可以毫无问题地执行。否则，您可以用onChange{this.handleChange.bind(this)} 替换onChange={this.handleChange}，这在我看来不太优雅。在handleChange里面调用handleSubmit函数
@r3dst0rm 谢谢，它正在工作。现在我遇到了每次更改都会延迟更改的问题，但我会独自发现。如果您愿意，您可以将您的解决方案放入答案中，以便我验证它

标签： javascript reactjs axios handle

【解决方案1】：

如评论部分所述，您可以执行以下操作：

将您的 handleChange(event) { 更改为箭头函数，并像这样更正此绑定：handleChange = (event) => { 或者像这样绑定它（在我看来这不是那么优雅）：

<Input placeholder="Nom complet" type="string" name="name_contact" value={this.state.name_contact} onChange={this.handleChange.bind(this)}/>

然后，您只需从 handleChange 函数调用端点。例如。通过调用handleSubmit 例程。或者只是通过简单地使用 axios 使其静音来调用端点。

【讨论】：