问在这里，我如何处理正确方法中道具的状态？它不会更新

EN

import React from 'react';

export default class TQValueCalculator extends React.Component {

constructor(props) {
    super(props);
    this.state = ({result:0});
    this.input = React.createRef();
    this.handleChange = this.handleChange.bind(this);
}

calculateTQValue(letter) {
      switch(letter) {
        case 'a':
            return 1;
        case 'b':
            return 2;
        case 'c':
            return 3;
        default:
            return null;
      }
  }

handleChange(event) {

    this.setState({result: 0})

    console.log("Initial Result " + this.state.result);

    for (var i = 0; i < this.input.current.value.length; i++) {
        this.setState({result: this.state.result + 
        this.calculateTQValue(this.input.current.value.charAt(i))})
    }

    console.log("Final Result " + this.state.result);
}

render(){

    return(
      <div>

      <input
        type="text"
        name="word"
        placeholder='Write here...'
        defaultValue = ''
        ref={this.input}
        onInput={this.handleChange}
        >
      </input>

      <p>
        Result: {this.state.result}
      </p>

      </div>
    )
  }

}