我正在尝试在从 AsyncTypeahead 中选择的数据上添加 onClick 事件。我将回调函数传递给仅当我选择了一个项目时才会呈现的问题。但是在选择一个项目后，它直接调用我传递给问题组件的回调函数
这是主要组件
constructor(props) {
super(props);
this.state = {
plateform: '',
selected: [],
isLoading: false,
options: []
};
this.handleInputChange = this.handleInputChange.bind(this);
this.saveTodo = this.saveTodo.bind(this);
}
async handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
await this.setState({
[name]: value
});
}
saveTodo(problemID) {
axios.post(`${API}/todos`,
{
problemID: problemID
},
{
headers: {
Accept: "application/json",
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.props.auth.token
}
})
.then(() => alert("Problem saved to todo list"))
.catch((err) => {
if (err.response) {
alert(err.response.data);
}
else {
alert("Sorry! A server error occurred. Try to save this problem later!");
}
});
}
render() {
return (
<>
<TrainLayout auth={this.props.auth} deauthenticate={this.props.deauthenticate} title={title} description={description} >
<div className="container">
<div className="row justify-content-center">
<div className="offset-md-3 col-md-7 offset-2">
<br />
<div className="form-group row">
<label htmlFor="oj" className="col-4 col-form-label col-form-label-sm">Online Judge</label>
<div className="col-8 col-md-5">
<select id="oj" type="select" className="form-control form-control-sm" name="plateform" onChange={this.handleInputChange} value={this.state.plateform}>
<option value="all">All Online Judges</option>
<option value="xxx">XXX</option>
<option value="yyy">YYY</option>
<option value="zzz">ZZZ</option>
</select>
</div>
</div>
<div className="form-group row">
<label htmlFor="pname" className="col-4 col-form-label col-form-label-sm">Problem Name</label>
<div className="col-8 col-md-5">
<AsyncTypeahead
isLoading={this.state.isLoading}
allowNew={false}
multiple={false}
id="pname"
labelKey={option => `${option.name} (${option.plateform})`}
minLength={2}
onChange={selected => this.setState({ selected })}
placeholder="Search for a problem"
onSearch={query => {
this.setState({isLoading: true});
axios.get(`${API}/problems/${query}`,
{
params: {
plateform: this.state.plateform
},
headers: {
Accept: "application/json",
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.props.auth.token
}
})
.then((response) => { /* eslint-disable-line camelcase */
const options = response.data.map((problem) => ({
_id: problem._id,
problemID: problem.problemID,
name: problem.name,
plateform: problem.plateform,
link: problem.link,
difficulty: problem.difficulty
}));
console.log("DATA: ", options);
this.setState({
isLoading: false,
options: options,
});
});
}}
options={this.state.options} />
</div>
</div>
</div>
</div>
</div>
<br /><br />
<div className="container">
<div className="row justify-content-center">
{!!this.state.selected &&
(
<Problem saveTodo={this.saveTodo} problem={this.state.selected[0]} />)
}
</div>
</div>
</TrainLayout>
</>
);
}
我希望当我点击 font-awesome 图标时调用 Onclick 事件，但当我从 AsyncTypeahead 中选择一个项目时它会触发
const Problem = ({problem, saveTodo}) => {
if (!problem) {
return (
<></>
);
}
return (
<>
<table className="table table-sm table-bordered table-striped table-responsive-sm table-hover">
<thead>
<tr className="text-center">
<th>Name</th>
<th>Online Judge</th>
<th>Difficulty</th>
<th>Add Todo</th>
<th>Solve</th>
</tr>
</thead>
<tbody>
<tr className="text-center">
<td> {problem.name} </td>
<td> {problem.plateform} </td>
<td> {problem.difficulty} </td>
<td> <a onClick={saveTodo(problem.problemID)}><FontAwesomeIcon icon="save" /></a> </td>
<td> <a href={`${problem.link}`} target="_blank"> Solve </a> </td>
</tr>
</tbody>
</table>
<br />
<div className="row justify-content-center">
<p>Note: Difficulty is not 100% accurate</p>
</div>
</>
);}
最佳答案
您应该传递一个函数作为事件处理程序。在您的示例中，您立即调用该函数。请尝试以下操作。
<td> <a onClick={() => saveTodo(problem.problemID)}><FontAwesomeIcon icon="save" /></a> </td>
参见Handling Events - React了解更多信息。
关于javascript - 如何处理条件组件内的 onClick 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57462612/