Question

我有以下显示测验选项的组件，当用户选择一个我要传递在“ handleNext”中选择的“ item.id”的值时，则不会出现错误：

Uncaught ReferenceError: item is not defined

代码：

render () {
    return (
        <UserContext.Provider value={this.state}>
            <UserContext.Consumer>
                {({ current_statement, current_alternative, handleNext}) => (

                   <form>
                        <p>{current_statement}</p>

                        {this.state.current_alternative.map(item => (
                            <React.Fragment key={item.id}>
                                <div>
                                    <input id={item.id} type="radio" name="question"/>
                                    <label htmlFor={item.id}>{item.content}</label>
                                </div>
                            </React.Fragment>
                        ))}

                        <button onClick={(e) => this.handleNext(e, item.id)} type="button">Next</button>

                    </form>
                )}

            </UserContext.Consumer>
        </UserContext.Provider>
    )
}

Answer 1

问题是你的你的下一步按钮的结合：

this.handleNext(e, item.id)

您已在.map()函数的外部添加了此内容，因此没有item（这在this.state.current_alternative映射的每个循环中均已明确定义）。移动此的.map()阵列的内部，你就可以存取item。

Answer 2

  handleRadioChange = id => this.setState({selected: id})

  render() {
    ...
    <input id={item.id} type="radio" name="question" onChange={e => this.handleRadioChange(e.event.target.id)} />
    ...

    <button onClick={(e) => this.handleNext(e, this.state.selected)} type="button">Next</button>

简而言之：您必须在状态下存储用户选择的单选按钮的选定ID，然后当用户按下按钮时，按钮将从状态中获取ID。

将所选值传递给函数时出错

2 个答案: