Question

这是我的第一个React应用程序，我已阅读官方教程/ doc并遵循其中的指南。我认为我对这些概念有一个很好的理解，但显然我遗漏了一些东西，因为我无法将值和id传递给父组件，所以我可以在父组件中进行评分。

基本上这是一个简单的测验（或q＆amp; a）应用程序，其中数组[0]是问题，数组[1]是答案：allProblems = [[q1，a1]，[q2，a2]，.. ]

class ChildComponent extends React.Component {

    inputAnswer(id, e) {
        e.preventDefault();
        this.props.onAnswer(e.target.value, id);
    }

    render() {
        const { problem, id, answer } = this.props;                                                                     

      return (
        <li>
            {problem[0]} = <input value={answer} onChange={(e) => this.inputAnswer(id, e)} />
        </li>
      );
    }
  }

  class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            answer: null,
        };
    }

    handleAnswer(answer, id) {
        alert(id);

        this.setState({
            answer: answer,
        })
    }

    render() {
        const rows = [];

        this.props.allProblems.forEach((problem, index) => {
            rows.push(          
              <ChildComponent 
                key={index}
                problem={problem} 
                id={index}
                answer={this.state.answer}
                correct={this.state.correct}
                onAnswer={() => this.handleAnswer()}
              />
            );
        });

      return (
        <div>
            <h1>Problems</h1>               
            <ul>{rows}</ul>
        </div>
      );

    }
  }

谢谢！

Answer 1

你有这个：

  onAnswer={() => this.handleAnswer()}

在父组件的forEach回调中。

你需要的是：

   onAnswer={(answer, id) => this.handleAnswer(answer, id)}

否则，handleAnswer不会收到任何东西。
总的来说，在你的回调中你应该推动这个：

  <ChildComponent 
        key={index}
        problem={problem} 
        id={index}
        answer={this.state.answer}
        correct={this.state.correct}
        onAnswer={(answer, id) => this.handleAnswer(answer, id)}
      />

更多信息（可选）：

您还可以通过使您的处理程序成为箭头功能来压缩代码并提高性能，这意味着您不必担心这个＆＃39;这个＆＃39;当它被使用时。因此，在您的子组件中，您可以将处理程序更改为：

   handleAnswer = (answer, id) => {
       alert(id);

       this.setState({
           answer: answer,
       })
   }

然后你可以这样做：

   onAnswer={this.handleAnswer}

Answer 2

我认为你应该有onBlur而不是onChange事件。此外，如果id来自props，不需要在事件处理程序参数中传递它，您可以直接在onBlur处理程序中提取它：

{problem[0]} = <input value={answer} onBlur={(e) => this.inputAnswer} />


inputAnswer(e) {
        e.preventDefault();
        this.props.onAnswer(e.target.value, this.props.id);
    }

从onClick事件处理程序

2 个答案: