[英]How to handle onClick event inside a conditional component
我正在嘗試在從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>
</>
);
}
我希望當我單擊超贊字體圖標時會調用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>
有關更多信息,請參見處理事件-React 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.