协慌网

我想阅读 onClick 事件值属性。但是，当我单击它时，在控制台上会看到类似以下的内容：

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

我的代码正常工作。当我运行时，我可以看到{column}但是在 onClick 事件中却看不到它。

我的代码：

var HeaderRows = React.createClass({
  handleSort:  function(value) {
    console.log(value);
  },
  render: function () {
    var that = this;
    return(
      <tr>
        {this.props.defaultColumns.map(function (column) {
          return (
            <th value={column} onClick={that.handleSort} >{column}</th>
          );
        })}
        {this.props.externalColumns.map(function (column) {
          // Multi dimension array - 0 is column name
          var externalColumnName = column[0];
          return ( <th>{externalColumnName}</th>);
        })}
      </tr>
    );
  }
});

如何在 React js 中将值传递给onClick

简单的方法

使用箭头功能：

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

这将创建一个新函数，该函数使用正确的参数handleSort

更好的方法

将其提取到子组件中。在 render 调用中使用箭头函数的问题是，每次都会创建一个新函数，最终会导致不必要的重新渲染。

如果创建子组件，则可以传递处理程序并将 props 用作参数，然后仅当 props 更改时才重新渲染（因为现在处理程序引用永远不会更改）：

子组件

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

主要成分

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

旧的简便方法（ES5）

使用.bind传递所需的参数，这样就可以将函数与 Component 上下文绑定：

return (
  <th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);

这里有很好的答案，我同意 @Austin Greco（第二个选项，有单独的组件）
我喜欢另一种方式，柯林。
您可以做的是创建一个接受参数（您的参数）的函数并返回另一个接受另一个参数的函数（在这种情况下为 click 事件）。那么您就可以随心所欲地使用它。

ES5：

handleChange(param) { // param is the argument you passed to the function
    return function (e) { // e is the event object that returned

    };
}

ES6：

handleChange = param => e => {
    // param is the argument you passed to the function
    // e is the event object that returned
};

您将以这种方式使用它：

<input 
    type="text" 
    onChange={this.handleChange(someParam)} 
/>

这是此类用法的完整示例：

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => e => {
    const nextValue = e.target.value;
    this.setState({ ["value" + param]: nextValue });
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

请注意，这种方法不能解决在每个渲染器上创建新实例的问题。
与其他内联处理程序相比，我更喜欢这种方法，因为我认为这种方法更加简洁易读。

编辑：
如以下注释中所建议，您可以缓存 / 记住该函数的结果。

这是一个幼稚的实现：

let memo = {};

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => {
    const handler = e => {
      const nextValue = e.target.value;
      this.setState({ ["value" + param]: nextValue });
    }
    if (!memo[param]) {
      memo[param] = e => handler(e)
    }
    return memo[param]
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div key={obj}>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

如今，有了 ES6，我觉得我们可以使用更新的答案。

return (
  <th value={column} onClick={()=>this.handleSort(column)} >{column}</th>
);

基本上，（对于任何不知道的人）由于onClick期望将函数传递给它，因此bind可以工作，因为它创建了函数的副本。相反，我们可以传递一个箭头函数表达式，该表达式仅调用所需的函数并保留this 。您永远不需要render方法，但是如果由于某种原因而在一个组件方法中this

constructor(props) {
  super(props);
  this.myMethod = this.myMethod.bind(this);
}