带有反应钩子形式和反应输入掩码的矩阵用户界面不起作用

Question

这个代码不起作用，一直在尝试多个版本，有人能帮忙吗？它会产生一个错误，从控制到非控制，加上面具根本不工作，我错过了什么？

https://github.com/react-hook-form/react-hook-form/issues/1255

下面是一个代码框：https://codesandbox.io/s/sad-shamir-nnh0c?fontsize=14&hidenavigation=1&theme=dark

import React, { useState } from 'react'
import { TextField } from '@material-ui/core'
import InputMask from 'react-input-mask'
import { useFormContext, Controller} from 'react-hook-form'

const PhoneInputMask = (props) => {
  const { inputRef, ...other } = props;
  return (
    <InputMask
      {...other}
      mask={['(' , '+', /[3]/, /[5-8]/, /[1-9]/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]}
      inputRef={inputRef}
      alwaysShowMask={true}
    />
  )
}


const PhoneInput = (props) => {
  const [textMask, setTextMask] = useState()
  const handleChange = (event) => setTextMask(event.target.value)
  const { errors, register, control } = useFormContext()

  const { name, label, registerContext } = props
  return (
    <Controller
      name={name}
      control={control}
      defaultValue=""
      render={props => (
      <TextField
        margin="normal"
        InputProps={{
          inputComponent: PhoneInputMask,
          value:textMask,
          onChange: handleChange,
        }}
        name={name}
        id={name}
        inputRef={register(registerContext)}
        label={label}
        error={!!errors[name]}
        helperText={(errors[name]) ? errors[name].message : null}
      />)}
    />
  )
}

export default PhoneInput

Answer 1

<Controller
    name="phone"
    control={control}
    defaultValue=""
    render={({ field: { onChange, value } }) => (
        <InputMask mask="+999999999999" value={value} onChange={onChange}>
            {
                inputProps => (
                    <TextField
                        error={!!errors.phone?.message}
                        label="Phone"
                        variant="outlined"
                        type="text"
                        fullWidth
                        required
                        {...inputProps}
                    />
                )
            }
        </InputMask>
    )}
/>

对于从受控值到非控制值的错误，您需要添加defaultValue=""