Question

我确定这是微不足道的，但我似乎无法弄清楚当用户点击按钮时如何访问我的按钮的值。当页面加载时，我的按钮列表会使用唯一值正确呈现。当我单击其中一个按钮时，该函数将触发，但该值将返回undefined。有人能告诉我这里我做错了什么吗？

路径：TestPage.jsx

import MyList from '../../components/MyList';

export default class TestPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};

    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick(event) {
    event.preventDefault();
    console.log("button click", event.target.value);
  }

  render() {
    return (
      <div>
        {this.props.lists.map((list) => (
          <div key={list._id}>
            <MyList
              listCollection={list}
              handleButtonClick={this.handleButtonClick}
            />
          </div>
        ))}
      </div>
    );
  }
}

路径：MyListComponent

const MyList = (props) => (
  <div>
    <Button onClick={props.handleButtonClick} value={props.listCollection._id}>{props.listCollection.title}</Button>
  </div>
);

Answer 1

event.target.value用于获取HTML元素的值（如输入框的内容），而不是获取React组件的道具。如果你直接传递这个值会更容易：

handleButtonClick(value) {
    console.log(value);
}

<Button onClick={() => props.handleButtonClick(props.listCollection._id)}>
    {props.listCollection.title}
</Button>

Answer 2

似乎你没有使用默认按钮，而是使用另一个名为Button的libray中的某种自定义组件..如果它是一个自定义的组件，它不会像国际组织那样工作，可能包含一个渲染按钮但是当你是通过Button组件

引用您正在执行的事件

onClick无法获取按钮组件值

2 个答案: