Question

我已经在我的App组件中导入了一个辅助函数，该函数应该在提交文本输入表单后触发，然后立即根据该函数的结果设置状态。然而，国家保持不变 - 即使我回归＆＃39;虚假＆＃39;来自测试功能。

如何使用此功能更改状态？我的应用程序组件：

import 'materialize-css/dist/css/materialize.min.css';
import React, { Component } from "react";
import { test } from './testBalance'

import Nav from './Nav'

class App extends Component {

  constructor(props){
    super(props)

    this.state = {
      text: '',
      isTested: true
    }
  }

  handleSubmit(e){
    e.preventDefault();

    if(!test(this.state.text)){
      this.setState({
        isTested: false
      })
    }
  }

  handleChange(e){
    this.setState({
      text: e.target.value
    })
  }


  render() {
    return(
      <div className="container">
        <Nav/>
        <h1 className="black-text">Test balanced parenthesis in the box below..</h1>
        <form onSubmit={(e) => this.handleSubmit(e)}>
          <input type="text" value={this.state.text} onChange={(e) => this.handleChange(e)}/>
        </form>
      </div>
    )
  }
}

export default App;

我的测试功能：

export function test(text){
  return false
}

Answer 1

我认为您需要绑定回调函数，以便this和handleSubmit内的handleChange实际引用该类。

constructor(){
    ...
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
}

我还建议更改handleSubmit，如下所示：

handleSubmit(e){
    e.preventDefault();

    this.setState({
        isTested: test(this.state.text),
    })
}

您也可以直接将this.handleSubmit作为回调传递给

<form onSubmit={this.handleSubmit} ... >

根据组件中辅助函数的结果更改状态

1 个答案: