Реагировать на функцию js onClick в функции карты не распознается - PullRequest
Новая
       12

Реагировать на функцию js onClick в функции карты не распознается

0 голосов
/ 04 июля 2019

Я получил этот массив в React, который я хочу использовать для написания и перебора элементов меню.Я устанавливаю состояние в моем хуке на false по умолчанию и использую функции toggleMyIdOne и toggleMyIdTwo для обновления состояния.

const [myIdOneToggler, setMyIdOne] = useState(false);
const [myIdOneToggler, setMyIdTwo] = useState(false);

const toggleMyIdOne= () => {
    setMyIdOne(!myIdOneToggler);
}

const toggleMyIdTwo= () => {
    setMyIdTwo(!myIdTwoToggler);
}

function Menu() {
    const menuItems = [
        {
            id: "myIdOne",
            state: "myIdOneToggler",
            name: "toggleMyIdOne",
            setState: "setMyIdOne",
            label: "MyIdOne"
        },
        {
            id: "myIdTwo",
            state: "myIdTwoToggler",
            name: "toggleMyIdTwo",
            setState: "setMyIdTwo",
            label: "MyIdTwo"
        },

Далее я возвращаю это для обновления состояния флажка после его нажатия.

{menuItems.map(item => (
    <div className="grid-item">
        <input onClick={item.name} type="checkbox" id={item.id} checked={item.state}/>
        <label htmlFor={item.id}>{item.label}</label>
    </div>

Предполагается вызвать функции toggleMyIdOne и toggleMyIdTwo .Он работает нормально и, как и ожидалось, когда его нет в функции карты, но в функции карты, кажется, что-то не так с тем, как я объявляю имя функции.

Я получаю это сообщение об ошибке:

Неизученное инвариантное нарушение: ожидается, что onClick слушатель будет функцией, вместо этого получил значение типа string.

Очевидно, что реакция не распознает строку из моего объявленного массива с элементами меню как функцию, но я не могу понять, как мне объявить это, чтобы заставить его работать.Или это невозможно сделать, чтобы сделать код более компактным.

1 Ответ

1 голос
/ 04 июля 2019

здесь вы передаете строку для выбора реквизита, который должен принимать только функции!Чтобы решить эту проблему, вы можете сделать: 

  {menuItems.map(item => (
    <div className="grid-item">
        <input onClick={()=>checkfunction(name)} type="checkbox" id={item.id} checked={item.state}/>
        <label htmlFor={item.id}>{item.label}</label>
    </div>

, и если вы хотите, чтобы каждый крюк выстрелил 

const checkfunction=name={
if(name==="toggleMyIdOne")
    setMyIdOne(!myIdOneToggler);
else
    setMyIdTwo(!myIdTwoToggler);
}
...