在 React 中，連接單個輸入 state 值時，state 未正確更新

Question

我有七個不同的輸入字段，並使用輸入的值更新 state。 之后，我連接所有 state 值並更新 contractNum state 但它沒有被正確更新。 它缺少第一個 state (this.state.contact.sys) 值。 我不確定如何獲得正確的連接值。 任何幫助深表感謝。

export default class test extends Component {
  state = {
    contact: {
      sys: '',
      co: '',
      lgr: '',
      mgr: '',
      sub: '',
      serial: '',
      num: ''
    },
    contractNum: ''
  };

  test = testValue => {
    this.setState({
      contractNum: testValue
    });
  };

  handleChangeFor = propertyName => event => {
    const { contact } = this.state;
    const newContact = {
      ...contact,
      [propertyName]: event.target.value
    };
    this.setState({ contact: newContact });
    let newValue =
      contact.sub +
      contact.co +
      contact.mgr +
      contact.lgr +
      contact.sub +
      contact.serial +
      contact.num;
    this.test(newValue);
  };

  render() {
    return (
      <div className="wrapper">
        <div className="container">
          <form>
            <input
              type="text"
              onChange={this.handleChangeFor('sys')}
              value={this.state.contact.sys}
              maxLength={2}
            />
            <input
              type="text"
              onChange={this.handleChangeFor('co')}
              value={this.state.contact.co}
              maxLength={1}
            />
            <input
              type="text"
              onChange={this.handleChangeFor('mgr')}
              value={this.state.contact.mgr}
              maxLength={1}
            />
            <input
              type="text"
              onChange={this.handleChangeFor('lgr')}
              value={this.state.contact.lgr}
              maxLength={1}
            />
            <input
              type="text"
              onChange={this.handleChangeFor('serial')}
              value={this.state.contact.serial}
              maxLength={6}
            />
            <input
              type="text"
              onChange={this.handleChangeFor('num')}
              value={this.state.contact.num}
              maxLength={2}
            />
            <input
              type="text"
              onChange={this.handleChangeFor('sub')}
              value={this.state.contact.sub}
              maxLength={1}
            />
          </form>
        </div>
      </div>
    );
  }
}

Answer 1

您在設置newValue時使用了contact.sub而不是contact.sys 。