Javascript 如何访问同一组件中另一个函数的属性？

我想把NumberFormat放在OutlinedInput中。另外，我想为NumberFormat提供不同的属性格式。将有一个选择窗口，用于定义要使用的格式属性

我有这个：

import OutlinedInput from "@material-ui/core/OutlinedInput";

import NumberFormat from 'react-number-format';

function NumberFormatCustom(props) {

  const { value, format, ...other} = props;

  return(
    <NumberFormat 
    {...other}
    format={format}
    mask="_"
    />
  )
}


export default function TextMaskPhone(props) {
  const classes = useStyles();
  const { value, name, label, onChange } = props;

  

  const [format, setFormat] = useState("+1 (###) ###-####");

  return (
      <div>
        <Button onClick={doTest}>change</Button>
        <FormControl className={classes.root} variant="outlined">
          <InputLabel htmlFor="component-outlined">{label}</InputLabel>
          <OutlinedInput
            className={classes.inputPhone}
            labelWidth="50"
            value={value}
            name={name}
            onChange={onChange}
            id="formatted-text-mask-input"
            inputComponent={NumberFormatCustom}
          />
        </FormControl>  
      </div>
  );
}

---

请帮助，我如何将TextMaskPhone函数中的formatvalue传递到NumberFormatCustom？

您必须使用inputProps：

<OutlinedInput
      labelWidth="50"
      value={value}
      name={name}
      onChange={onChange}
      inputProps={{
        format
      }}
      id="formatted-text-mask-input"
      inputComponent={NumberFormatCustom}
    />

由于inputComponent接受一个组件，因此简单地执行以下操作

} />

---

如果不知道OutlinedInput是什么，就无法回答这个问题。它来自第三方库吗？是的，很抱歉忘记添加它。其材质为UIit，但inputComponent会丢失OutlinedComponent的所有样式特性：