显示来自API的数据根据​​选择标签做出反应

Question

当用户使用onChange在select标记中选择一个“角色”时，我需要在前面显示API的球型数据。 这是我前面的API（也用于根据用户输入的电子邮件显示数据）：

constructor(props) {
    super(props);
    this.state = {
        filter_account_email: '',
        filter_account_role: '',
        filter_account: []
    };
}
//Fiter Account 
filterAccount(event){
    const head = localStorage.getItem('head');
    const payload = localStorage.getItem('payload');
    const signature = localStorage.getItem('signature');
    var tok = head + "." + payload + "." + signature;
    // window.location.reload();
    event.preventDefault();

    fetch(`${API}/api/accounts/getaccountsbyfilter`
        , {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'authorization': `Bearer ${tok}`
            },
            mode: 'cors',
            body: JSON.stringify({
                email: this.state.filter_account_email,
                //role: this.state.filter_account_role,

            })
        })
        .then(results => {
            return results.json();
        })
        .then(res => {
            if (res.success === true) {
                console.log("res : ", res);
                this.setState({ filter_account: res.result });
                // this.setState({ email_filter: res.result[0].email });
                // this.setState({ role_filter: res.result[0].role });
                // this.setState({ enable_filter: res.result[0].enable });
            }
        })
}

这是我在渲染中的选择，我添加了一个按钮以显示数据，但是我更喜欢使用onChange函数显示它们，而不是单击：

<div className="filter-role">
    <label htmlFor="filter_account_role"></label>
    <select name="filter_account_role" id="filter_account_role" onChange={this.handleInputChangeRoles}>
        <option value="admin">Admin</option>
        <option value="serveur">Serveur</option>
        <option value="user">Utilisateur</option>
        {/* {
        items.length > 0   ? items.map(item => {
            const { role, email } = item;
            return <option value={role} key={email}> { role }</option>
        }) : ""
    } */}
    </select>
    <button type="button" className="filter-btn" onClick={this.filterAccount}  > valider</button>
</div>

这就是应该如何显示数据的方式：

{
    filter_account.length > 0 ? filter_account.map(fil => {
        const { nom, prenom, email, tel, _id, role, enable } = fil;
        return <tr className={role === 'admin' ? "tr-admin" : ''} key={email}>
            <td>{_id}</td>
            <td>{role === 'user' ? 'Utilisateur' : role === 'admin' ? 'Admin' : 'Serveur'}</td>
            <td>{email}</td>
            <td>{nom}</td>
            <td>{prenom}</td>
            <td>{tel}</td>
            <td>{
                isEnable === true && _id === lid ?
                    "Activé"
                    :
                    enable === true ?
                        "Activé"
                        :
                        "Désactivé"
            }</td>

            {localStorage.setItem('id_account', _id)}</tr>
    }) :
        ""
}

由于选择或复选框很复杂，因为我们有很多选项，而不像输入:( 谢谢