Question

我正在研究React和Material-ui。

我想在一个组件内创建几个输入字段，这些字段的数量和值是从父组件作为prop接收的。我添加了一个功能，可以在用户按下Enter键时移动焦点，或者在其最后一个字段时创建新字段。

当前代码有15个引用（我知道这很愚蠢，但我认为它不会超过15个）。问题在于，焦点创建后不会移到新字段。你能建议一个更好的方法吗？

class ResponseInput extends Component {
    componentWillMount() {
        this.refs = [...Array(15)].map(r => React.createRef())
    }

    changeFocus = index => {
        if (index < this.props.inputs.length - 1) {
            this.refs[index + 1].current.focus();
        } else {
            this.props.addInput();
        }
    }

    render() {
        const { inputs, addInput, handleChangeInput } = this.props;

        return (
            <List>
                {inputs.map((item, index) => (
                    <ListItem key={index} >
                        <Input
                            value={item}
                            inputRef={this.refs[index]}
                            onChange={(event) => handleChangeInput (index, event)}
                            onKeyPress= {(event) => {
                                if (event.key === 'Enter') {
                                    this.changeFocus(index);
                                }
                            }}
                            // autoFocus
                        />
                    </ListItem>
                ))}
            </List>
        );
    }
}

Answer 1

将npm run _deploy:real添加到autoFocus={true}应该可以解决。

Input

演示在https://codesandbox.io/s/10089vq54l

Answer 2

https://codesandbox.io/s/7wojmxv0oq

<Input autoFocus={index+1>originalInputsLength} .../>

使用autoFocus={index+1>originalInputsLength}检查，这意味着输入长度是否超过原始输入长度（用户添加列表），然后将autoFocus设置为新创建的<Input/>。

originalInputsLength在App的构造函数中初始化为state，然后作为props传递给<ResponseInput inputs={inputs} addInput={this.addInput} originalInputsLength={originalInputsLength}/>

class App extends React.Component {
  constructor(props){
    super(props);
    const inputs = [1, 2, 3, 4, 5];
    this.state = {
      inputs: inputs,
      originalInputsLength: inputs.length,
    };
  }

按键盘上的ENTER按钮添加或聚焦到下一个输入字段

2 个答案: