MuiPhoneNumber 在错误为真时禁用输入，react, material-ui-phone-number答案

【问题标题】：MuiPhoneNumber disables typing when error is true, react, material-ui-phone-numberMuiPhoneNumber 在错误为真时禁用输入，react, material-ui-phone-number
【发布时间】：2020-12-02 18:35:42
【问题描述】：

我正在尝试按照材料 ui 电话号码的说明进行反应，使用材料 ui 进行反应。在onChange 上，我调用handlePhone 函数，它将输入的值保存到状态。问题是，在每个setPhone 上，它都会禁用输入，就像它使输入失去焦点一样，您每次都必须单击输入才能输入。如果我删除setPhone(value);，它在里面的类型很好，但是我不会保存值并丢失验证。有什么想法吗？

js:

const [phone, setPhone] = React.useState("");
const [phoneError, setPhoneError] = React.useState(false);
const handlePhone = (value, countrydata) => {
    setPhoneError(false);
    setPhone(value);

html:

<MuiPhoneNumber fullWidth defaultCountry={"es"} variant="outlined" label="Número de teléfono" name="phone" onChange={handlePhone} error={phoneError} helperText={phoneError && "Invalid phone"} value={phone} />

【问题讨论】：

标签： javascript reactjs material-ui next.js

【解决方案1】：

现在我正在使用一个肮脏的解决方案来添加 autoFocus 参数，这会改变 boolean onChange

html:

<MuiPhoneNumber key="autofocus_issue_112" defaultCountry="es" fullWidth variant="outlined" label="Número de teléfono" name="phone" value={phone} onChange={handlePhone} error={phoneError} helperText={phoneError && "Invalid phone number"} autoFocus={focusPhone} />

js:

const [focusPhone, setFocusPhone] = React.useState(false);
     function handlePhone(value) {
        setFocusPhone(true);
        setPhone(value);
        setPhoneError(false);
      }

但重要的是要添加，当用户点击另一个输入字段时，你需要做setFocusPhone(false);，否则MuiPhoneNumber将始终被聚焦。

【讨论】：