javascript - Material-ui Button onClick() causes "Uncaught TypeError: Cannot read property ' name' of undefined"错误

Question

我有一个具有 OnClick 功能的 Material ui 按钮。但出于某种原因，当我点击按钮时，它不起作用，并出现如上所示的错误。

我可以知道我在这里做错了什么吗？ 我按照此处的建议使用了构造函数:suggested solution 但还是不行

Prop :

type Props = {
  showSmallHero: () => void,
  fetchTalentIfNeeded: () => void,
  submitJobApplicationIfNeeded: () => void,
  talent: Object,
};

我的代码:

  componentDidMount() {
    this.props.showSmallHero();
    this.props.fetchTalentIfNeeded();
  }

  handleChange = (event, d) => {
    const { target } = event;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    if (d.name === 'gender') {
      this.setState({
        [d.name]: d.value,
      });
    } else if (d.name === 'resume') {
      // This is a file
    } else {
      const { name } = target;
      this.setState({
        [name]: value,
      });
    }
  };

  handleSubmit = () => {
    const fileInput = document.getElementById('resume');
    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('full-name', this.state.fullName);
    formData.append('gender', this.state.gender);
    formData.append('nric', this.state.nationalId);
    formData.append('email', this.state.email);
    formData.append('phone-number', this.state.phoneNumber);
    formData.append('position-applied', this.state.jobName);
    formData.append('job-id', this.state.jobId);
    formData.append('experience', this.state.experience);
    formData.append('academic-result', this.state.academicResult);
    formData.append('resume', file);
    this.props.submitJobApplicationIfNeeded(formData);
  };

  handleClick = (e, d) => {
    this.setState({ jobName: d.name, jobId: d.id, showModal: true });
  };

  hideModal = () => {
    this.setState({ showModal: false });
  };


render() {

<Button
     variant="contained"
     size="medium"
     color="secondary"
     id={t.acf.job_id}
     name={t.acf.job_name}
     onClick={this.handleClick}
     >
     Apply
     </Button>
}

非常感谢任何帮助。

Answer 1

您没有在 onClick 方法上使用 handleClick 函数传递任何参数，并且您正试图从未定义的参数访问一些键，这就是为什么您收到错误 cannot read property name of undefined。尝试将参数传递给该 handleClick 函数:

<Button
 variant="contained"
 size="medium"
 color="secondary"
 id={t.acf.job_id}
 name={t.acf.job_name}
 onClick={()=>this.handleClick(param1,param2)}
 >
 Apply
 </Button>