Javascript 使用axios将数据发送到输入文件中的每个更改

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

我想将输入的

name\u contact

内容发送到每次更改。但我只能通过

按钮发送它。
所以我的问题是：
可能吗？我该怎么做呢

    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>
    );
  }
}

导出默认类FormPage扩展组件{
建造师（道具）{
超级（道具）；
this.state=初始状态；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
removeClick（一）{
让用户=[…this.state.users]；
用户.拼接（i，1）；
this.setState（{users}）；
}
showMessage=（bool）=>{
设置超时（（）=>{
这是我的国家({
showMessage：正确
});
}, 2000);
如果（本状态显示）返回；
this.setState（{Show:true，Show:true}）；
设置超时（（）=>{
this.setState（{Show:false，Show:false}）；
}, 2000);
}
showMessageFalse=（bool）=>{
这是我的国家({
showMessage:false
});
此.setState（初始状态）；
}
手变（活动）{
const InputValue=event.target.value；
const stateField=event.target.name；
这是我的国家({
[stateField]：输入值，
});
console.log（this.state）；
}
异步handleSubmit（事件）{
this.setState（{loading:true}）；
设置超时（（）=>{
this.setState（{loading:false}）；
}, 2000);
event.preventDefault（）；
常数{
姓名\联系方式=“”，
}=本州；
等待axios.post(
“我的端点API”，
{
姓名：`${name_contact}`）；
}
render（）{
const{loading}=this.state；
返回(
联系人详细信息

名称：



更新
);
}
}

我试着在
handleChange
中调用
handleSubmit
，但什么都没有。（你不需要给我一个好的答案，但是一首歌会让我非常高兴）
谢谢，
如评论部分所述，您可以执行以下操作：

将您的
handleChange（event）{
更改为箭头函数，并按如下方式更正此绑定：
handleChange=（event）=>{
或者按如下方式绑定它（我认为这并不是很优雅）：



然后，您只需要从
handleChange
函数调用端点。例如，通过调用
handleSubmit
例程。或者只需使用axios使端点静音即可调用端点。
如注释部分所述，您可以执行以下操作：

将您的
handleChange（event）{
更改为箭头函数，并按如下方式更正此绑定：
handleChange=（event）=>{
或者按如下方式绑定它（我认为这并不是很优雅）：



然后，您只需从
handleChange
函数调用端点。例如，通过调用
handleSubmit
例程。或者只需使用axios使其静音即可调用端点。
因此，您希望在用户每次输入任何密钥时向服务器发送请求？@r3dst0rm基本上是的。如果任何人都可以在此输入中执行任何键。我正在执行此操作，当我单击按钮时，axios正在执行此操作。但在inputReplace
handleChange（event）{
with
handleChange=（event）=>{
，这样您就可以正确地绑定this值，它应该可以毫无问题地执行。否则，您可以将
onChange={this.handleChange}
替换为
onChange{this.handleChange.bind（this）}
在我看来，这不太优雅。而在handleChange内部，则称为handleSubmitfunction@r3dst0rm谢谢，它正在工作。现在我遇到了每次更改都会延迟更改的问题，但我会单独查找。如果您愿意，您可以将解决方案放入答案中，这样我就可以验证它，以便您向服务器发送请求每次用户输入任何键时？@r3dst0rm基本上是的。如果有人在此输入中输入任何键，我想发送输入。我正在这样做，当我单击按钮时，axios正在执行此操作。但是它在inputReplace
handleChange（event）{
with
handleChange=（event）=>{
，这样您就可以正确地绑定this值，它应该可以毫无问题地执行。否则，您可以将
onChange={this.handleChange}
替换为
onChange{this.handleChange.bind（this）}
在我看来，这不太优雅。而在handleChange内部，则称为handleSubmitfunction@r3dst0rm谢谢，它起作用了。现在我遇到了每次更改都会延迟更改的问题，但我会单独找到。如果您愿意，您可以将您的解决方案放入答案中，以便我可以验证它