reactjs - 输入字段（使用降档）在单击 div 时清除输入的数据，而不是提交和输入字段

Question

当我单击 div 中除提交按钮和输入字段之外的任何内容时，输入字段正在清除输入的输入。我该如何解决？输入的输入应该存在，直到提交发生。我有一个带有如下所示输入字段的 div 以及复选框和提交按钮。复选框和提交按钮没有任何问题。

return(
    <Downshift
        onChange={selection => this.setState({input: selection})}
        itemToString={item => (item ? item.first_name : '')}
    >
    {({
        getInputProps,
        getItemProps,
        getMenuProps,
        isOpen,
        inputValue,
        highlightedIndex,
        selectedItem,
    }) => (
            <div className={classes.container}>
                {this.props.disabled ?
                    <TextField
                        disabled
                        label="Name"
                        fullWidth
                        inputProps={{
                            ...getInputProps(),
                            ref: node => {
                                popperNode = node;
                            }
                        }}
                        // InputProps={{ ...getInputProps() }}
                    />
                    : 
                    <TextField
                        label="Name"
                        fullWidth
                        inputProps={{ 
                            ...getInputProps(),
                            ref: node => {
                                popperNode = node;
                            }
                        }}

                    />
                }
                <Popper open={isOpen} anchorEl={popperNode} style={{zIndex:2000}}>
                    <div {...(isOpen ? getMenuProps({}, { suppressRefError: true }) : {})}>
                    {inputValue ? this.props.setInputValue(inputValue): null}
                        <Paper
                            style={{ marginTop: 8, width: popperNode ? popperNode.clientWidth : null }}
                            // className={classes.paper}
                            square>
                            { this.state.suggestions
                                .filter(item => !inputValue || item.first_name.includes(inputValue))
                                .map((item, index) => (
                                    <MenuItem
                                        component="div"
                                        {...getItemProps({
                                            key: item.person_id,
                                            index,
                                            item,
                                        })}
                                    > 
                                    <Typography color="primary">{item.first_name + ' ('+item.person_id +')'} </Typography>
                                    </MenuItem>
                                ))}
                        </Paper>
                    </div>
                </Popper>
            </div>
        )}
    </Downshift>
);

Answer 1

输入为空，因为itemToString={item => (item ? item.first_name : '')}在Downshift组件中。

第二个条件（其他情况）中的值应该是来自 TextField 的值。

这是我的代码，用于继续为 Downshift 输入值：

export class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
  }

  onInputValueChange = (inputValue: string) => {
    this.setState({ inputValue });
  }

  render() {
    // This line to get current value
    const { inputValue } = this.state;

    return (
      <Downshift
        onChange={selection => this.onSelectItem(selection)}
        onInputValueChange={this.onInputValueChange}
        // Mapping value from ref to TextInput
        itemToString={item => (item ? item.value : inputValue)}
      >
        {({
          getInputProps,
          getItemProps,
          getMenuProps,
          isOpen,
          highlightedIndex,
          selectedItem
        }) => (
          <div>
            <TextField
              {...getInputProps()}
            />
          ... // Other component if you want
          </div>
      </Downshift>
    )
  }
}

请注意，带有onInputValueChange回调的新更改<Downshift>

希望这有帮助！