有没有办法在 React 的 componentDidMount 方法中使用事件对象？

Question

我有两个组件，App组件和SearchBar组件。SearchBar组件是一个功能组件，表单提交由handlessubmit方法处理，该方法在App组件中定义，并通过props向下传递。handlessubmit方法是在App组件中定义的，它首先阻止浏览器表单提交的默认行为，然后异步调用YouTube API。API调用总是成功的，并且每当我通过表单搜索某些东西时都能正常工作，比如"building"。但我想在组件第一次渲染时显示一些默认视频，例如"games"。所以我在componentDidMount中调用了handlessubmit方法，它给出了一个错误&;Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'preventDefault')&;是否有任何方法我可以使用组件didmount内的事件对象?

下面是我的代码:

应用程序:

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: "",
videos: [],
selectedVideo: null,
};  }

componentDidMount() {
this.handleSubmit("games");
}
// handle form submission
handleSubmit = async (query, e) => {
e.preventDefault();
// API call
};
// handle change in input
onIputChange = (e) => {
const inputValue = e.target.value;
this.setState({ inputValue });
};
render() {
const inputValue = this.state.inputValue;
return (
<div>
<SearhBar
handleSubmit={(e) => this.handleSubmit(inputValue, e)}
inputValue={inputValue}
onInputChange={this.onIputChange}
/>
</div>
);
}

SearchBar:

function SearhBar(props) {
return (
<form onSubmit={props.handleSubmit}>
<label>Search Video</label>
<input
onChange={props.onInputChange}
type="text"
value={props.inputValue}
/>
</form>
);
}

Answer 1

不，你不能，因为你只是没有事件…您可以做两件事:

• 用if (e) e.preventDefault()包围e.preventDefault
• 将常见的callApi部分提取到一个方法中，并从componentDidMount中调用该方法:

// handle form submission
handleSubmit = async (query, e) => {
e.preventDefault();
this.callApi(query)
};
componentDidMount() {
this.callApi("games");
}
callApi(query) {
// code to call api
}