Как найти input с пустым value и добавить к нему класс при нажатии на кнопку?

Question

Подскажите, пожалуйста, как правильно искать input с пустым value, если они создаются динамически и через перебор массива?
Например, добавить css класс .error при нажатии на кнопку Проверить

Сделал проверку на пустые input c помощью функции onChange, но интересно, как сделать добавление css классов при нажатии на кнопку проверить?

Песочница:
https://codesandbox.io/s/frosty-currying-3gtrmz?file=/src/App.js

app.js

export default function App() {
  const [arrayInputs, setMyArray] = useState([
    { name: "Input 1", value: 1 },
    { name: "Input 2", value: 2 },
    { name: "Input 3", value: 3 }
  ]);

  // Добавление нового Input
  const addInput = () => {
    const newArray = [
      ...arrayInputs,
      {
        name: `Input ${arrayInputs.length + 1}`,
        value: arrayInputs.length + 1
      }
    ];
    setMyArray(newArray);
  };

  // Проверка всех Input
  const valid = (e) => {
    console.log(e);
  };

  return (
    <div className="App">
      {arrayInputs.map((e) => {
        return (
          <div key={e.name}>
            <span>{e.name}: </span>
            <input
              defaultValue={e.value}
              onInput={(e) => {
                if (e.target.value.length < 1) {
                  e.target.classList.add("error");
                } else {
                  e.target.classList.remove("error");
                }
              }}
            />
            <input
              defaultValue={e.value}
              onInput={(e) => {
                if (e.target.value.length < 1) {
                  e.target.classList.add("error");
                } else {
                  e.target.classList.remove("error");
                }
              }}
            />
          </div>
        );
      })}

      <button onClick={addInput}>Добавить</button>
      <button onClick={valid}>Проверить пустые</button>
    </div>
  );
}

Answer 1

как правильно искать input с пустым value, если они создаются динамически и через перебор массива? Например, добавить css класс .error при нажатии на кнопку Проверить

Все в Реакт должно работать от стейта... А у тебя какая-то каша получается.

Сделал небольшой набросок того как такое можно реализовать если изменить работу со стейтом.

function App() {
  const [arrayInputs, setMyArray] = React.useState([
    { name: "Input 1", value: [1, 1] },
    { name: "Input 2", value: [2, 2] },
    { name: "Input 3", value: [3, 2] }
  ]);
  const fnc = n => m => e => {
    const val = e.target.value
    setMyArray(old => old.map((o, i) => {
      if (i !== n) return o
      const a = o.value.map((v, i) => i === m ? val : v)
      return {...o, value: a}
    }));
  }
  // Добавление нового Input
  const addInput = () => {
    const newArray = [
      ...arrayInputs,
      {
        name: `Input ${arrayInputs.length + 1}`,
        value: arrayInputs.length + 1
      }
    ];
    setMyArray(newArray);
  };

  // Проверка всех Input
  const valid = e => {
    setMyArray(old => old.map(o => ({
      ...o, 
      err: o.value.map(v => v === '')
    })));
  };

  return (
    <div className="App">
      {arrayInputs.map((e, i) => <Item key={e.name} data={e} fnc={fnc(i)} />)}

      <button onClick={addInput}>Добавить</button>
      <button onClick={valid}>Проверить пустые</button>
    </div>
  );
}
//
function Item({data: e, fnc}) {
  const err = e.err || [false, false]
  return (
    <div>
      <span>{e.name}: </span>
      {e.value.map((v, i) => {
        return <Input key={i} fnc={fnc(i)} val={v} err={err[i]} />
      })}
    </div>
  );
}
//
function Input(props) {
  const cls = props.err ? 'error' : ''
  return (
    <input className={cls} value={props.val} onInput={props.fnc} />
  )
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

.App {
  font-family: sans-serif;
  text-align: center;
}

input,
input:focus {
  margin: 30px 10px;
  border: 1px solid gray;
  width: 50px;
}

.error {
  border: 1px solid red;
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="like_button_container"></div>

БЛОГ НА HUSL

Как найти input с пустым value и добавить к нему класс при нажатии на кнопку?

Ответы (1 шт):