Почему изменения значения флажка не отображаются?

Я использую реагирующий и материальный пользовательский интерфейс. Мне нужно проверить все флажки в списке, установив один флажок в родительском компоненте (т.е. мне нужно выбрать все). Я передаю правильное значение родительского флажка через реквизиты, но это не вызывает визуальных изменений в его дочерних элементах, даже если их значения меняются на «истина». Я уверен, что значения верны, потому что пытался вывести их в консоль.

Вот родитель:

const [checkboxValue, setCheckboxValue] = useState(false)

<Checkbox value = {checkboxValue} onChange = {e => setCheckboxValue(e.target.checked)}/>
{elements.map(element => (<Element selectAll = {checkboxValue}/>))}

А вот ребенок:

function Element(props) {
    const [checkboxValue, setCheckboxValue] = useState(false)
    useEffect(() => {
        setCheckboxValue(props.selectAll)
    }, [props.selectAll])

return (
<Checkbox value = {checkboxValue} onChange = {e => setCheckboxValue(e.target.checked)}/>)
}

javascript reactjs material-ui

17.03.2022 15:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы используете value вместо checked

function SingleCheckBox({ selectAll }) {
  const [checkboxValue, setCheckboxValue] = useState(selectAll);

  useEffect(() => {
    setCheckboxValue(selectAll);
  }, [selectAll]);

  return (
    <Checkbox
      checked = {checkboxValue}
      onChange = {(e) => setCheckboxValue(e.target.checked)}
    />
  );
}

export default function App() {
  const [checkboxValue, setCheckboxValue] = useState(false);

  return (
    <div className = "App">
      <Checkbox
        checked = {checkboxValue}
        onChange = {(e) => {
          setCheckboxValue(e.target.checked);
        }}
      />
      <div>
        <h2>Other checkboxes</h2>
        <SingleCheckBox selectAll = {checkboxValue} />
      </div>
    </div>
  );
}

https://codesandbox.io/s/angry-buck-yp7f3z?file=/src/App.js

Пожалуйста, проголосуйте, если это помогло вам :)

— 17.03.2022 16:17

Да, но там написано, что мне нужно иметь более высокую репутацию, чтобы мой голос учитывался здесь. Но там также говорится, что мой голос повлиял на вашу репутацию. И теперь я также поставил галочку «принять ответ». Я надеюсь, что это также имеет какой-то эффект. Еще раз спасибо за вашу помощь.

— 18.03.2022 09:20

17.03.2022 15:46