无法在 aoutoComplete 材质 UI 中读取 null 的属性“selectionEnd”答案

【问题标题】：Cannot read property 'selectionEnd' of null in aoutoComplete material UI无法在 aoutoComplete 材质 UI 中读取 null 的属性“selectionEnd”
【发布时间】：2020-04-22 14:58:02
【问题描述】：

我的自动完成有问题 react-text-mask 是这样的：

<MaskedInput
  {...other}
  ref={ref => {
    inputRef(ref ? ref.inputElement : null);
    return ref;
  }}
  mask={[
    /\d/,
    /\d/,
    /\d/,
    /\d/,
    ' ',
    /\d/,
    /\d/,
    /\d/,
    ' ',
    /\d/,
    /\d/,
    /\d/,
    /\d/,
  ]}
  placeholderChar={'\u2000'}
/>;

而自动完成组件是这样的：

<AmountAutoComplete
  options={this.state.autoCompleteOptions.map(option => option.title)}
  renderInput={params => {
    return (
      <TextField
        value={this.props.value}
        onChange={e => {
          onValueChange(e.currentTarget.value, '');
        }}
        InputProps={{
          inputComponent: this.TextMaskCustom,
        }}
      />
    );
  }}
/>;

错误是

无法读取 null 的属性“selectionEnd” 在句柄点击（useAutocomplete.js:763）

并且在 useAutocomplete.js:763 中有关于 inputRef: 的错误：

var handleClick = function handleClick() { if (firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) { inputRef.current.focus(); inputRef.current.select(); }

【问题讨论】：

您在使用之前创建了 ref 吗？你能给我们看看代码吗？
我使用 Material UI 文档material-ui.com/components/text-fields的确切模式
您提供的 URL 中的 ref 来自 props，您之前是否创建了 ref，您能否向我们展示您创建它的代码块？
我只是在 MaskInput 中像文档一样使用 ref，我不在课堂上的其他任何地方使用它
javascript TextMaskCustom = (props) => { const { inputRef, ...other } = props; return ( <MaskedInput {...other} ref={ref => { inputRef(ref ? ref.inputElement : null); }} mask={[/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/]} placeholderChar={'\u2000'} /> ); };

标签： reactjs autocomplete material-ui

【解决方案1】：

我应该像这样将参数发送到 textField：

<TextField
    {...params}
     InputProps={{
     ...params.InputProps,
    }} 
 />

【讨论】：