ReactJs：从映射函数呈现的li到达方法后未定义target.key

Question

我目前正在尝试编写一个可以执行以下操作的 React 应用程序： - 使用 map 函数从数组中创建问题列表。 - 使用 onClick 道具使每个列表元素可点击 - 链接的 onClick 方法使用我的 'qsChange' 属性更改另一个文件中的状态。

我很难让我的列表可点击并最终按照这个问题进行管理：React: trying to add an onClick to a li tag but the click handler function is undefined

但是，现在我无法让我的变量“选择”返回一个定义的值。我希望 var 选择等于“A ？”，“B ？”或“C？”取决于哪个

我点击。

这是我的代码：

var questions = ["A ?", "B ?", "C ?"];
var Questions = React.createClass({
    handleClick: function() {
      var visibility;
      if(this.props.visibility) {
          document.getElementById('second').style.display = 'none';
          visibility = false;
          this.props.onChange(visibility);
      } else {
          document.getElementById('second').style.display = 'block';
          visibility = true;
          this.props.onChange(visibility);
      }
    },

/* Here is where my problem lies */
    onItemClick: function(e){
        var choice = e.target.key;
        this.props.qsChange(choice);
        alert(choice);
    },

    render: function() {
        return (
            <div className="bigqs">
                <div id="first" className="small" style={firstStyle}>
                     <h1>Question :</h1>
                         <button style={btnStyle} onClick={this.handleClick}>
                                <img id="arrow" src="../../img/arrow.png" />
                         </button>
                     <h3 id="selectedQuestion">{this.props.selected}</h3>
                </div>
                <div id="second" className="small" style={{display: 'none'}}>
                   <h4>
                      <ul>
                           {questions.map(function(qs, i) {return <li key={qs[i]} onClick={this.onItemClick}>{qs}</li>;}, this)}
                      </ul>
                   </h4>
                </div>
            </div>
        );
     }
});

我还是个新手，所以请放纵 ;-) 我希望我已经足够清楚了。

Ps：我也试过这个指南，但它对我不起作用：http://derpturkey.com/react-pass-value-with-onclick/

Answer 1

您可以将问题传递给您的处理程序，而不是从 target 获取问题。此外，由于内部映射 qs 是一个字符串，qs[i] 将从该索引中获取字符串中的字符。您只需要确保您的 key 是唯一的。

onItemClick: function(choice) {
  this.props.qsChange(choice)
  alert(choice)
},

render() {
  return (
   <div>
     ...
     {questions.map(qs =>
       <li key={qs} onClick={() => this.onItemClick(qs)}>{qs}</li>
     )}
     ...
   </div>
  )
}

其实你的中间函数没多大用，你可以在 render 里面调用你的 props 函数：

render() {
  return (
   <div>
     ...
     {questions.map(qs =>
       <li key={qs} onClick={() => this.props.qsChange(qs)}>{qs}</li>
     )}
     ...
   </div>
  )
}