如何在ternery运算符中设置usestate值传递回调函数setState()

Question

<label htmlFor="rank" className="font-bbold">Rank:  
</label>

<InputNumber 
  id="rank" 
  value={singlepoints.rank} 
  onValueChange={(e) =>
    onRankChange(e, index)} 
  required>
</InputNumber>

{

  //  (singlepoints.rank === 0 || singlepoints.rank === null ) ? () => console.log('fjdkfhdfhd') : null


  //  ||
                                


(singlepoints.rank === 0 || 
  singlepoints.rank === null ) ?
 **(() => setInvalid(true))** && 
<small className="p-error  ml-6"> 
  Rank is required.</small>
: null


}

Answer 1

嗨，这不是你处理状态更改的方式。

首先，要验证某些内容，通常有onBlur事件(当输入失去焦点时会触发)

其次，不必尝试以三元方式运行代码，而是必须在useEffect钩子中这样做：

useEffect(() => { 
  if (singlepoints.rank === 0 || 
  singlepoints.rank === null )
     setInvalid(true)
}, [singlepoints])

不过，我建议您使用formik和是的来进行验证，一旦您弄清楚了，就表单验证和更改处理而言，它将使您的生活更加轻松。

Answer 2

你在这里有个好的开始。我看到您有一个标签和一个InputName组件，它看起来必须是必须的“级别”，而不是零。

首先，我要引用“受控组件”，即“输入表单元素( input，for example <input />)，其值由React控制”。下面的代码将让您了解如何重写代码(请注意，我添加了一个submit按钮来处理条件语句)：

 import { useState } from "react";
    function App() {
    const [singlePointsRank, setSinglePointsRank] = useState("");
    const [invalid, setInvalid] = useState(false);
    
    function handleSubmit(e) {
        e.preventDefault();
        if (singlePointsRank == 0) {
           setInvalid(true);
        } else {
           //do something else if the user provides a valid answer
        }
    }
        
    return (
        <div className="App">
           <form>
             <label>Rank:</label>
             <input 
               required
               name="rank" 
               value={singlePointsRank}
               onChange={(e) => setSinglePointsRank(e.target.value)} 
             />
             <button onClick={handleSubmit} type="submit">
               Submit
             </button>
           </form>
    
        {/*The error message below will only be displayed if invalid is set to true */}
        {invalid && <p>Please provide a valid rank number.</p>}
        </div>
    );
    }
    export default App;

注意，如果表单为空，则输入元素中的required属性将阻止表单提交。因此，您实际上不需要检查singlePointsRank === null。

这种方式将在用户键入状态变量singlePointsRank时更新其状态变量。然后，当用户单击submit按钮时，React将调用handleSubmit函数，您可以向其中添加条件语句，将第二个状态变量invalid设置为false。

关于三元操作符，我不建议在这种情况下使用它，因为您可能希望向条件语句中添加一些额外的代码，例如将invalid重新设置为false、删除错误消息和清除输入字段以允许用户提交另一个秩号。

请参阅下面的示例，以给您一个想法：

import { useState } from "react";
function Random2() {
const [singlePointsRank, setSinglePointsRank] = useState("");
const [invalid, setInvalid] = useState(false);

function handleSubmit(e) {
    e.preventDefault();
    if(singlePointsRank == 0) {
        setInvalid(true);
        setSinglePointsRank("");
    } else {
        // do something else and clear the input field and reset invalid back to false
        setInvalid(false);
        setSinglePointsRank("");
    }
    
}

function handleInputChange(e) {
    if(setSinglePointsRank === "") {   
        setInvalid(false);
    }
    setSinglePointsRank(e.target.value)
}

return (
    <div className="App">
       <form>
         <label>Rank:</label>
         <input 
           required
           name="rank" 
           value={singlePointsRank}
           onChange={handleInputChange} 
         />
         <button onClick={handleSubmit} type="submit">
           Submit
         </button>
       </form>

    {/*The error message below will only be displayed if invalid is set to true */}
    {invalid && <p>Please provide a valid rank number.</p>}
    </div>
);
}
export default Random2;

同样，由于这里的主要问题是关于三元操作符和设置状态，尽管我不建议在本例中使用它，但您可以重写初始的handleSubmit函数，如下所示，只需处理代码：

     function handleSubmit(e) {
        e.preventDefault();
        singlePointsRank == 0 ? setInvalid(true) : console.log("do something else");  
    }

为了得到更多的练习，你可以重写

 {invalid && <p>Please provide a valid rank number.</p>} 

作为

{invalid ? <p>Please provide a valid rank number.</p> : ""}