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>回调具有新变化

希望获得帮助！

当单击div而非提交和输入字段时，输入字段（使用降档）正在清除输入的数据

1 个答案: