反应输入验证在表单中不起作用

Question

我在 React 中有一个组件，其字段中有 required。这个想法是 onClick 将触发一个单独的功能，将一名足球运动员添加到两个不同的商店（类似于 TODO 应用程序）。但是，似乎验证不起作用 - 例如 name 是必需的 string，但即使字符串为空，表单似乎也添加了播放器。两个 number 输入也是如此。

我不想用onSubmit因为这好像每次都要刷新页面，导致我丢失数据。

我正在为我的表单使用 react-modal 库。首先是打开模态的函数：

    function renderAddButton() {
        return (
            <Row
                horizontal='center'
                vertical='center'
                onClick={openModal}
            >
                Add Player
            </Row>
        );
    }

这是模式及其挂钩：

    const [playerName, setPlayerName] = useState('');
    const [totalGoals, setTotalGoals] = useState(0);
    const [goalPercentage, setGoalPercentage] = useState(0);

    function openModal() {
        setIsOpen(true);
    }
    function closeModal() {
        setIsOpen(false);
    }

                    <Modal
                        isOpen={modalIsOpen}
                        onRequestClose={closeModal}
                        style={modalStyles}
                        contentLabel='Player Form Modal'
                    >
                        <h3>Create Player</h3>
                        <form>
                            <label>Name</label>
                            <input
                                type='string'
                                id='playerNameId'
                                name='playerName'
                                defaultValue=''
                                onChange={(e) => setPlayerName(e.target.value)}
                                required
                            />
                            <label>Total Goals</label>
                            <input
                                type='number'
                                id='totalGoalsId'
                                name='totalGoals'
                                defaultValue='0'
                                min='0'
                                onChange={(e) => setTotalGoals(e.target.value)}
                                required
                            />
                            <label>Goal Percentage</label>
                            <input
                                type='number'
                                id='goalPercentageId'
                                name='playerGoalPercentage'
                                defaultValue='0'
                                min='0'
                                step ='0.01'
                                max='1'
                                onChange={(e) => setGoalPercentage(e.target.value)}
                                required
                            />
                            <button onClick={(e) => onAddButtonClick(e)}>Submit</button>
                        </form>

                        <button onClick={closeModal}>close</button>
                    </Modal>

现在触发此功能时，验证似乎不起作用。空的 playerId 和 totalGoals 以及 goalPercentage 似乎没有问题。如果输入为空，如何验证输入并从运行停止此函数？

    function onAddButtonClick(e) {
        e.preventDefault();

        setItems((prev) => {

            const newItems = [...prev];

            const uuid= uuidv4();

            newItems.push({
                name: playerName,
                playerId:uuid,
                teamId: currentTeam[0].teamId,
                totalGoals: totalGoals,
                goalPercentage: goalPercentage
            });

            playersStore.push({
                name: playerName,
                playerId:uuid,
                teamId: currentTeam[0].teamId,
                totalGoals: totalGoals,
                goalPercentage: goalPercentage
            });

            return newItems;
        });
    }

Answer 1

required 属性仅适用于默认表单操作。您需要在处理程序中进行自己的验证。您还应该显式定义按钮 type 属性，因为默认情况下按钮是 type="submit".

创建一个验证函数并将您的状态值传递给它。 Return 如果输入有效则为真，否则为假。

const validateInput = ({ goalPercentage, playerName, totalGoals }) => {
  if (!playerName.trim()) {
    return false;
  }

  // other validations

  return true;
};

检查 onAddButtonClick 中的输入，只有在输入有效时才更新状态。

function onAddButtonClick(e) {
  e.preventDefault();

  const validInput = validateInput({ goalPercentage, playerName, totalGoals });

  if (!validInput) {
    return null;
  }

  setItems((prev) => {
    const newItems = [...prev];
    const uuid= uuidv4();

    newItems.push({
      name: playerName,
      playerId: uuid,
      teamId: currentTeam[0].teamId,
      totalGoals: totalGoals,
      goalPercentage: goalPercentage
    });

    playersStore.push({
      name: playerName,
      playerId: uuid,
      teamId: currentTeam[0].teamId,
      totalGoals: totalGoals,
      goalPercentage: goalPercentage
    });

    return newItems;
  });
}

更新按钮以具有明确的类型。

<button
  type="button"
  onClick={onAddButtonClick}
>
  Submit
</button>

Answer 2

你可以这样做

    function onAddButtonClick(e) {
        e.preventDefault();

     if(playerName.trim()===''){ //you can make more validations here
       return;
     } 
    //down here use the rest of logic
   }

反应输入验证在表单中不起作用

React Input Validation Not Working in Form

forms

reactjs

bootstrap-4

react-modal

react-hooks