输入失去对变化的关注

Question

我在解决这个问题时遇到了一些麻烦。我遵循的模式与我用于选择输入的模式相同，但一旦我键入一个字符，它就会失去焦点。

我读了一些关于这个话题的问题，但我看到的答案都没有给我一个解决方案。我理解为什么会发生这种情况-更改处理程序设置状态，以便再次呈现组件。我只是不知道该怎么解决。我试过设置一个稳定的钥匙，但没有用。我也只是在表单提交期间手动提取值，但在这种情况下，我失去了设置默认值的能力。这感觉相当基本，所以希望有一个简单的修复!提前谢谢。

return (
<Authenticator>
<CContainer>
<CForm onSubmit={this.formSubmit}>
<CContainer>
<CRow className="align-items-center">
<CCol>
<CFormInput
type="number"
id="quantityToAdd"
label={`Quantity (${this.state.formStockUnitName})`}
placeholder="100"
onChange={this.changeQtyValue}
value={this.state.formQuantity}
/>
</CCol>
<CCol>
<CFormLabel htmlFor="expiryDate">Expiry Date</CFormLabel>
<DatePicker className='form-control' id="expiryDate" selected={this.state.formExpiry} onChange={this.changeExpiryDate} />
</CCol>
<CCol><CButton className='float-end' type="submit" color="primary">Add</CButton></CCol>
</CRow>
</CContainer>
</CForm>
</CContainer>
</Authenticator >
)

输入变化的状态处理程序:

changeQtyValue = async (event) => {
console.log(event.target.value);
this.setState({ formQuantity: event.target.value });
}

还有构造函数:

constructor(props) {
super(props);
this.state = {
loading: true,
formStockName: '',
formStockUnitName: '',
formExpiry: '',
formQuantity: '',
components: [],
};
}

Answer 1

我解决了这个问题。通过反复试验，我发现是顶级的Authenticator组件触发了这种行为。我不完全明白为什么——但是这样包装给了我一个超级简单的方法来保护视图。我通过另一种方式进行了重构，并删除了该组件，现在它像预期的那样工作了。

对于ref，这是组件:https://ui.docs.amplify.aws/react/components/authenticator