我无法从反应组件值设置 state

Question

I am trying to below update the state in the values.answerB.

When I try and write an updateState function in Input.js, I can't get my head around how to grab the input value and update the values.answerB state in the state object.

What am I doing wrong?

UserForm.js file

state = {
  step: 1,
  values: [
    {
      section: "summary",
      answers:
      {
          answerA: 1,
          answerB: 13,
          answerC: 6
      }   
    },
    {
      section: "players",
      answers:
      {
          answerE: 15,
          answerF: 132,
          answerG: 63
      }   
    }
  ]
}

switch (step) {
  default:
    return (
      <Start />
    );
}

Start.js file

render() {
    const { values } = this.props;
    return (
        <Input          
           label={'Player name'}
           value={ values.answerB }
        />
    )
}

Input.js file

export class Input extends Component {

    // PROBLEM UPDATING THE STATE HERE!!
    updateState = e => {
       this.setState({ [input]: e.target.value });
    };

    render() {
        return (
            <input class="bootstrap-sample-class"
              min="0"
              type="number" 
              onChange={this.updateState}
            />
        )
    }
}
export default Input;

Answer 1

export class Input extends Component {

    // PROBLEM UPDATING THE STATE HERE!!
    updateState = e => {
       this.setState({ values[0].answers.answerB });
    };

    render() {
        return (
            <input class="bootstrap-sample-class"
              min="0"
              type="number" 
              onChange={this.updateState}
            />
        )
    }
}
export default Input;

Answer 2

Your updateState should be in UserForm component and passed down to the Input component as a prop.

Answer 3

From what i can see in the function below is that,it has a problem in the key-value pair

updateState = e => {
// [input] input here was neither declared nor initialized with any value
       this.setState({ [input]: e.target.value });
    };

and change this

UserForm.js file

state = {
  step: 1,
  values: [
    {
      section: "summary",
      answers:
      {
          answerA: 1,
          answerB: 13,
          answerC: 6
      }   
    },
    {
      section: "players",
      answers:
      {
          answerE: 15,
          answerF: 132,
          answerG: 63
      }   
    }
  ]
}

switch (step) {
  default:
    return (
      <Start />
    );
}

To this

UserForm.js file

state = {
  step: 1,
  values: [
    {
      section: "summary",
      answers:
      {
          answerA: 1,
          answerB: 13,
          answerC: 6
      }   
    },
    {
      section: "players",
      answers:
      {
          answerE: 15,
          answerF: 132,
          answerG: 63
      }   
    }
  ]
}
 updateState =(e,input) => { // <=== changes
       this.setState({ [input]: e.target.value });
    };
switch (step) {
  default:
    return (
      <Start update={this.updateState}/> // changes
    );
}

Answer 4

Try using onchange in UserFrom.js

Userform.js

state = {
  step: 1,
  values: [
    {
      section: "summary",
      answers:
      {
          answerA: 1,
          answerB: 13,
          answerC: 6
      }   
    },
    {
      section: "players",
      answers:
      {
          answerE: 15,
          answerF: 132,
          answerG: 63
      }   
    }
  ]
}
updateState = e => {
     let data=[...this.state.values]
     let copstate=[...data,{...this.state.values[answers],answerB: e.target.value}]
       this.setState({ values: copstate});
    };
switch (step) {
  default:
    return (
      <Start changed={(e)=>updateState(e)}/>
    );
}

Start.js

render() {
    const { values } = this.props;
    return (
        <Input          
           label={'Player name'}
           value={ values.answerB }
           changed={props.changed}
        />
    )
}

Input.js file

export class Input extends Component {

    // PROBLEM UPDATING THE STATE HERE!!


    render() {
        return (
            <input class="bootstrap-sample-class"
              min="0"
              type="number" 
              onChange={props.changed}
            />
        )
    }
}
export default Input;