狀態值不更新

Question

我有一個表，每行中有一個輸入框。總共有3行，我需要從這三個輸入框的值中計算總數。但是價值狀態並未更新。我只獲得最初的價值狀態。例如，有代理，酒店，管理員的狀態對象。如果我初始化代理值10，我在輸入框中得到10，但是當我嘗試更改值時，我只得到10。該值沒有得到更新。

下面是代碼

const Tbody = ({ roles, states, onChange, onBlur }) => { 
    const row = roles.map((role, index) => (
    <tr key={index}> 
     <td>{index + 1}</td> 
     <td>{role.label}</td> 
     <td> 
     <TextFieldGroup 
      id="formControlsText" 
      type="number" 
      name={role.name} 
      value={states[role.name]} 
      onChange={event => onChange(event)} 
      onBlur={event => onBlur(event)} 
      error={states.errors[role.name]} 
      required 
     /> 
     </td> 
    </tr> 
)); 
    return <tbody>{row}</tbody>; 
}; 

class Commission extends React.PureComponent { 
    state = { 
    agentCommission: 0, 
    hotelCommission: 0, 
    adminCommission: 0, 
    errors: {}, 
    isSubmitted: false 
    }; 

    handleChange = event => { 
    console.log(event.target); 
    const fieldName = event.target.name; 
    this.setState(
     { [event.target.name]: parseFloat(event.target.value) }, 
    () => { 
     this.validateField([fieldName]); 
     } 
    ); 
    }; 

    handleBlur = event => { 
    const fieldName = event.target.name; 
    this.validateField([fieldName]); 
    }; 

    validateField = validate => { 
    const errors = { ...this.state.errors }; 
    let hasError = false; 
    validate.forEach(field => { 
     if (
     parseFloat(this.state[field]) > 100 || 
     parseFloat(this.state[field]) < 0 
    ) { 
     hasError = true; 
     errors[field] = 'cannot be less than 0 and more than 100'; 
     } else { 
     errors[field] = ''; 
     } 
    }); 
    this.setState({ errors }); 
    return !hasError; 
    }; 

    render() { 
    const { agentCommission, adminCommission, hotelcommission } = this.state; 
    const totalCommission = agentCommission + adminCommission + hotelcommission; 
    console.log('totalCommission', totalCommission); 
    return (
     <div className="table-responsive"> 
     <table className="table table-striped table-bordered table-condensed"> 
      <thead> 
      <tr> 
       <th>S.N</th> 
       <th>Role</th> 
       <th>Commission</th> 
      </tr> 
      </thead> 
      <Tbody 
      roles={[ 
       { name: 'agentCommission', label: 'Agent' }, 
       { name: 'hotelCommission', label: 'Hotel Owner' }, 
       { name: 'adminCommission', label: 'Admin' } 
      ]} 
      states={{ ...this.state }} 
      onChange={this.handleChange} 
      onBlur={this.handleBlur} 
      /> 
      <tbody> 
      <tr> 
       <td> 
       <button 
        className="btn btn-primary" 
        onClick={this.handleSubmit} 
        disabled={totalCommission === 100 ? false : true}> 
        Save Changes 
       </button> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 
} 

Answer 1

在ReactJS，當你擴展陣營組件類，你必須在構造函數初始化狀態。此外，您需要通過super(props)調用父類的構造函數。這是該陣營庫的類可以訪問你的狀態值，以及在方法，如setState()

https://codepen.io/julianfresco/pen/ybrZNe/

class Commission extends React.PureComponent { 

    constructor(props, context) { 
    super(props) 
    this.state = { 
     agentCommission: 0, 
     hotelCommission: 0, 
     adminCommission: 0, 
     errors: {}, 
     isSubmitted: false 
    }; 

    // method instance bindings 
    this.handleChange = this.handleChange.bind(this) 
    this.handleBlur = this.handleBlur.bind(this) 
    this.validateField = this.validateField.bind(this) 
    } 

    // ... 

    // you had 1 typo in the render function, hotelCommission wasn't camel case 
    render() { 
    const { agentCommission, adminCommission, hotelCommission } = this.state; 
    // ... 
    } 
} 

Answer 2

提供接入的唯一途徑

的問題是Commission類，你在哪裏沒有初始化狀態。 你的代碼應該是這樣的：

const Tbody = ({ roles, states, onChange, onBlur }) => { 
    const row = roles.map((role, index) => (
    <tr key={index}> 
     <td>{index + 1}</td> 
     <td>{role.label}</td> 
     <td> 
     <input 
      id="formControlsText" 
      type="number" 
      name={role.name} 
      value={states[role.name]} 
      onChange={event => onChange(event)} 
      onBlur={event => onBlur(event)} 
      error={states.errors[role.name]} 
      required 
     /> 
     </td> 
    </tr> 
)); 
    return <tbody>{row}</tbody>; 
}; 

class Commission extends React.PureComponent { 
    constructor(props) { 
    super(props) 
    this.state = { 
     agentCommission: 0, 
     hotelCommission: 0, 
     adminCommission: 0, 
     errors: {}, 
     isSubmitted: false 
    }; 
    } 


    handleChange(event) { 
    console.log(event.target); 
    const fieldName = event.target.name; 
    this.setState(
     { [event.target.name]: parseFloat(event.target.value) }, 
    () => { 
     this.validateField([fieldName]); 
     } 
    ); 
    }; 

    handleBlur(event) { 
    const fieldName = event.target.name; 
    this.validateField([fieldName]); 
    }; 

    validateField(validate) { 
    const errors = { ...this.state.errors }; 
    let hasError = false; 
    validate.forEach(field => { 
     if (
     parseFloat(this.state[field]) > 100 || 
     parseFloat(this.state[field]) < 0 
    ) { 
     hasError = true; 
     errors[field] = 'cannot be less than 0 and more than 100'; 
     } else { 
     errors[field] = ''; 
     } 
    }); 
    this.setState({ errors }); 
    return !hasError; 
    }; 

    render() { 
    const { agentCommission, adminCommission, hotelcommission } = this.state; 
    const totalCommission = agentCommission + adminCommission + hotelcommission; 
    console.log('totalCommission', totalCommission); 
    return (
     <div className="table-responsive"> 
     <table className="table table-striped table-bordered table-condensed"> 
      <thead> 
      <tr> 
       <th>S.N</th> 
       <th>Role</th> 
       <th>Commission</th> 
      </tr> 
      </thead> 
      <Tbody 
      roles={[ 
       { name: 'agentCommission', label: 'Agent' }, 
       { name: 'hotelCommission', label: 'Hotel Owner' }, 
       { name: 'adminCommission', label: 'Admin' } 
      ]} 
      states={{ ...this.state }} 
      onChange={this.handleChange} 
      onBlur={this.handleBlur} 
      /> 
      <tbody> 
      <tr> 
       <td> 
       <button 
        className="btn btn-primary" 
        onClick={this.handleSubmit} 
        disabled={totalCommission === 100 ? false : true}> 
        Save Changes 
       </button> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 
} 

小提琴演示：https://codesandbox.io/s/KO3vDRGjR