Флажок React обновляет страницу после каждого клика, а на передней панели он не показывает, что он был отмечен - PullRequest
Новая
       7

Флажок React обновляет страницу после каждого клика, а на передней панели он не показывает, что он был отмечен

0 голосов
/ 07 апреля 2020

Моя проблема в том, что после того, как я установил флажок ввода, он не показывает мне «галочку», что он отмечен, но в режиме отладчика показывает «true» для проверенного. В моем коде я получил запрос, чтобы показать мне все ингредиенты, и пользователь может выбрать их.

После нажатия / проверки есть функция onIngredientsChange, и я хочу отправить список ings[] моему родительскому компоненту с идентификаторами всех проверенных ингредиентов. Кто-нибудь может мне помочь?

Вот мой компонент: 

const Ingredient = (props) => {
  const onIngredientChange = (e) => {
    setChecked(e.target.checked);
    document.getElementById(e.target.value + "amount").disabled = !document.getElementById(e.target.value + "amount").disabled;

    if(e.target.checked){
      ings.push(e.target.value)
    }
    props.onIngredientChange(ings);
  };

  let [ingredients, setIngredient] = useState();
  const [checked, setChecked] = useState(false);
  let ings = [];

  useEffect(() => {
    axios.get("/ingredients").then((data) => {
      const ingredients = Object.keys(data.data).map((ingredient, index) => {
      return (
        <tr key={index}>
          <td scope="col">
            <label>{data.data[index].name}</label>
          </td>
          <td scope="col">
            <input
              id={ingredient}
              onChange={onIngredientChange}
              key={index}
              type="checkbox"
              name={"newIngredients"}
              value={data.data[index].id}
              checked={checked}
            />
          </td>
          <td scope="col">
            <input
              id={data.data[index].id + "amount"}
              key={index}
              type="number"
              min="0"
              max="500"
              disabled
              name="amount"
              placeholder="grams"
              onChange={onIngredientChange}
            />
          </td>
        </tr>
      );
    });
    setIngredient(ingredients);
  });
}, []);

  return(
    <div className="form-group">
      <table className="table tr-history table-striped small">
        <thead>
          <tr>
            <th scope="col">
              <h5>Ingredient</h5>
            </th>
            <th scope="col">
              <h5>Check</h5>
            </th>
            <th scope="col">
              <h5>Amount</h5>
            </th>
          </tr>
        </thead>
        <tbody>
          {ingredients}
        </tbody>
      </table>
    </div> 
  )  
}

export default Ingredient;
...