Question

所以我有这个REACT代码应该可以工作：

App.jsx：

class App extends Component {
    constructor(props){             
        super(props);
        this.state = {count: props.initialCount};
        this.onChange = this.onChange.bind(this);
        this.state = {
            questions:[
                {
                    id: 1,
                    text: 'What is your name ?',
                    choices: [
                        {
                            id: 'a',
                            text: 'Michael'
                        },
                        {
                            id: 'b',
                            text: 'Brad'
                        },
                        {
                            id: 'c',
                            text: 'Steven'
                        }
                    ],
                    correct: 'b'
                },
                {
                    id: 2,
                    text: 'What is your mothers name ?',
                    choices: [
                        {
                            id: 'a',
                            text: 'Sara'
                        },
                        {
                            id: 'b',
                            text: 'Sue'
                        },
                        {
                            id: 'c',
                            text: 'Donna'
                        }
                    ],
                    correct: 'c'
                },              
                {
                    id: 3,
                    text: 'What is your father name ?',
                    choices: [
                        {
                            id: 'a',
                            text: 'Bobby'
                        },
                        {
                            id: 'b',
                            text: 'Harry'
                        },
                        {
                            id: 'c',
                            text: 'Wayne'
                        }
                    ],
                    correct: 'a'
                },                              
                {
                    id: 4,
                    text: 'What is your friend name ?',
                    choices: [
                        {
                            id: 'a',
                            text: 'John'
                        },
                        {
                            id: 'b',
                            text: 'Paul'
                        },
                        {
                            id: 'c',
                            text: 'Dan'
                        }
                    ],
                    correct: 'c'
                }               
            ],
            score: 0,
            current: 1
        }       
    }
    render(){
        return(
            <div onClick={this.onChange}>
                <QuestionList {...this.state} />
            </div>
        )
    }
}

export default App

QuestionList.jsx：

class QuestionList extends Component {
    render(){
        return(
            <div className="questions">
                {
                    this.props.questions.map(question => {

                        return <Question question={question} key={question.id} {...this.props} />

                    })
                }
            </div>
        )
    }
}

export default QuestionList

Question.jsx：

class Question extends Component {  
    render(){
        const {question} = this.props;
        return(
            <div className="well">
                <h3 >{question.text}</h3>
                <hr />
                <ul className="list-group">
                    {
                        this.props.question.choices.map(choice => {
                            return(
                                <li className="list-group-item">
                                    {choice.id} <input type="radio" name={question.id} value={choice.id} /> {choice.text}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default Question

除了它在控制台中抛出此错误： TypeError：_this.onChange未定义

我谷歌并发现：

确保在构造函数中执行this.onChange = this.onChange.bind（this）

但是当我在控制器上添加它时，我收到此错误： TypeError：this.onChange未定义

Answer 1

如果你想把它放在constructor中，你需要这样做：

注意：这是来自反应文档的示例，它们链接在下面

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.onChange = this.onChange.bind(this);
  }
  onChange() {} // add this 

  render() {
    return (
      <div onClick={this.onChange}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

docs：https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Answer 2

class Question extends Component {  
    onChange(e) {
       //Your change code here!!
    }
    render(){
        const {question} = this.props;
        return(
            <div className="well">
                <h3 >{question.text}</h3>
                <hr />
                <ul className="list-group">
                    {
                        this.props.question.choices.map(choice => {
                            return(
                                <li className="list-group-item">
                                    {choice.id} <input type="radio" onChange={this.onChange.bind(this)} name={question.id} value={choice.id} /> {choice.text}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default Question

你班上应该有一个onChange方法。

Answer 3

为了避免绑定错误，您有两个选择：

使用this.onClick = this.onClick.bind(this);（内部构造函数）
使用onClick功能的箭头功能

我希望这个技巧可以帮助你。

REACT onChange绑定此错误

3 个答案: