Javascript 我能'；t根据反应组件值设置状态

我试图在下面更新values.answerB中的状态

当我尝试在Input.js中编写updateState函数时，我无法理解如何获取输入值并更新state对象中的values.answerB状态

我做错了什么

UserForm.js文件

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

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

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

状态={
步骤：1，
价值观：[
{
第节：“摘要”，
答案：
{
答:1,，
答：13，
答：6
}   
},
{
章节：“玩家”，
答案：
{
答复：15，
答复:132,，
答复：63
}   
}
]
}
开关（步骤）{
违约：
返回(
);
}

Start.js文件

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

render（）{
const{values}=this.props；
返回(
)
}

Input.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;

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;

导出类输入扩展组件{
//更新此处的状态时出现问题！！
updateState=e=>{
this.setState（{[input]：e.target.value}）；
};
render（）{
返回(
)
}
}
导出默认输入；

您的

updateState

应该在UserForm组件中，并作为道具传递给

Input

组件

导出类输入扩展组件{
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;

//更新此处的状态时出现问题！！
updateState=e=>{
this.setState（{values[0].answers.answerB}）；
};
render（）{
返回(
)
}
}
导出默认输入；

从下面的函数中可以看出，它的键值对存在问题 改变这个 UserForm.js文件

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

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

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

状态={
步骤：1，
价值观：[
{
第节：“摘要”，
答案：
{
答:1,，
答：13，
答：6
}   
},
{
章节：“玩家”，
答案：
{
答复：15，
答复:132,，
答复：63
}   
}
]
}
开关（步骤）{
违约：
返回(
);
}

对此 UserForm.js文件

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

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

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

状态={
步骤：1，
价值观：[
{
第节：“摘要”，
答案：
{
答:1,，
答：13，
答：6
}   
},
{
章节：“玩家”，
答案：
{
答复：15，
答复:132,，
答复：63
}   
}
]
}
updateState=（e，input）=>{/尝试在UserFrom.js中使用onchange

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

状态={
步骤：1，
价值观：[
{
第节：“摘要”，
答案：
{
答:1,，
答：13，
答：6
}   
},
{
章节：“玩家”，
答案：
{
答复：15，
答复:132,，
答复：63
}   
}
]
}
updateState=e=>{
让数据=[…this.state.values]
让copstate=[…数据，{…this.state.values[answers]，answerB:e.target.value}]
this.setState（{values:copstate}）；
};
开关（步骤）{
违约：
返回(
更新（e）}/>
);
}

Start.js

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

render（）{
const{values}=this.props；
返回(
)
}

Input.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;

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;

导出类输入扩展组件{
//更新此处的状态时出现问题！！
render（）{
返回(
)
}
}
导出默认输入；