當單擊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

輸入為空，因為Downshift組件中的itemToString={item => (item ? item.first_name : '')} 。

第二種情況下的值（其他情況下）應為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>
    )
  }
}

請注意，在<Downshift>上使用onInputValueChange回調進行的新更改

希望對您有所幫助！