如何 select 每个 event.target.value 表格

Question

我有一个包含三个输入标签的表单。我想要完成的是禁用表单上的提交按钮，直到每个输入中至少有一个字符。

这是我使用的代码：

const [isdisabled, setIsDisabled] = useState(true) 

const onChange = evt => {
    if (evt.target.value.trim().length < 1) {
      setIsDisabled(true) 
    } else {
      setIsDisabled(false)
    }
  }

我的表格：

<form id="form" onSubmit={onSubmit}>
      <h2>Create New Quiz</h2>
      <input id="newQuestion" placeholder="Enter question" />
      <input id="newTrueAnswer" placeholder="Enter true answer" />
      <input id="newFalseAnswer" placeholder="Enter false answer" />
      <button id="submitNewQuizBtn" disabled={isdisabled} >Submit new quiz</button>
    </form>

然后将按钮禁用属性设置为 isDisabled。上面代码的问题在于，当三个输入之一有一个以上的字符时，setIsDisabled 设置为 true，而不是三个输入都设置为 true。有没有办法让我 select 所有三个输入的 evt.target.value 以便我可以将其放入我的 if 语句中？

Answer 1

当用户输入表单值时，您如何绑定它们？我会把数据存储在你的状态，然后你的禁用检查只是根据状态计算的。

让您上手的简单示例：

1: Create a state handler: 
const [newQuestion, setNewQuestion] = useState("")

Create your onChange handler to bind to state
2: <input id="newQuestion" placeholder="Enter question" onChange={(e) => setNewQuestion(e.target.value)} />

3: Do your disabled check based off of the values.
const isDisabled = newQuestion.length === 0

如何 select 每个 event.target.value 表格

How to select every event.target.value in a form

reactjs

submit

form-submit