如何在条件组件中处理 onClick 事件

Question

我正在尝试在我从 AsyncTypeahead select编辑的数据上添加 onClick 事件。我将回调函数传递给仅当我 select 编辑了一个项目时才会呈现的问题。但是在 selecting 一个项目后它直接调用我传递给问题组件的回调函数

这是主要组件

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 事件，但当我 select 来自 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>
    </>
);}

Answer 1

您应该传递一个函数作为事件处理程序。在您的示例中，您将立即调用该函数。请尝试以下操作。

<td> <a onClick={() => saveTodo(problem.problemID)}><FontAwesomeIcon icon="save" /></a> </td>

有关详细信息，请参阅 Handling Events - React。

如何在条件组件中处理 onClick 事件

How to handle onClick event inside a conditional component

javascript

reactjs

next.js

bootstrap-typeahead