Я не могу установить состояние из значения компонента реакции

Question

Я пытаюсь обновить состояние ниже в values.answerB.

Когда я пытаюсь написать функцию updateState в Input. js, я не могу понять, как получить введите значение и обновите значение values.answerB в объекте состояния.

Что я делаю не так?

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 файл

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

Ввод. js файл

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

Попробуйте использовать onchange в 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}
        />
    )
}

Ввод. js файл

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;

Answer 3

Из приведенной ниже функции видно, что у нее есть проблема в паре ключ-значение

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

и измените

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 />
    );
}

К этому

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

Ваш updateState должен быть в компоненте UserForm и передаваться в компонент Input в качестве реквизита.