Поле ввода (с использованием понижающей передачи) очищает введенные данные при нажатии на 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.

Вот мой код для продолжения ввода значения для понижающей передачи:

export class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  render() {
    // This line to get current value
    const typingText = this.textInput.current && this.textInput.current.value;

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

Надеюсь, это поможет!