Question

我有下一个代码：

<Wrapper>
   <InputsGroup />
   <Controls />
</Wrapper>

在InputsGroup组件中，我有一个输入列表：

// InputsGroup 
<>
   <input ... />
   <input ... />
   <input ... />
   ...
</>

在“控件”组件中，我有两个按钮：“下一个”和“上一个”。

// Controls

<>
   <button> Prev </button>
   <button> Next </button>
</>

这个想法是，当我单击“下一步”或“上一步”按钮时，需要在输入之间切换焦点。

最好的方法是什么，如何管理输入的焦点？

是这样的：

Answer 1

我将使用本地状态来跟踪重点突出的输入字段。

在外部组件中：

Utils.CopyFilesWithExtension(@"C:\src_folder",@"C:\dst_folder",".csv");

在InputsGroup组件内部，您可以在其中呈现输入：

state = {
  focused: 'input_name' || defaultValue
};

handleFocusChange = focused => {
  // Use your own logic to change the focus
  this.setState({ focused });
};

render() {
  const { focused } = this.state;

  return (
    <Wrapper>
      <InputsGroup focused={focused} />
      <Controls onClick={this.handleFocusChange} />
    </Wrapper>
  );
}

“控件”组件的最后：

const { focused } = this.props;

<>
  {/* .... */}
  <input
    {/* ... */}
    autoFocus={focused === inputName}
  />
</>

通常，我将输入字段选项保存在一个单独的常量文件中，因此该逻辑可以非常容易实现。您可以使用它来通过单击按钮浏览输入或渲染输入字段。

可能的字段图示例：

const { onClick } = this.props;
<>
 <button onClick={() => onClick(/* you need your own logic here, too */)}> Prev </button>
 <button onClick={() => onClick(/* you need your own logic here, too */)}> Next </button>
</>

Answer 2

您可以使用Refs概念解决此问题，这是一个可行的解决方案：-

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      focus: 0
    };
    this.textInput0 = React.createRef();
    this.textInput1 = React.createRef();
    this.textInput2 = React.createRef();
  }
  componentDidMount() {
    this.textInput0.current.focus();
  }
  clickHandler = btnType => {
    let focus = this.state.focus;
    if (btnType === "prev") {
      if (focus !== 0) focus--;
    } else {
      if (focus !== 2) focus++;
    }

    this.focusInputField(focus);
    this.setState({ focus: focus });
  };
  focusInputField = id => {
    //console.log(id);
    switch (id) {
      case 0:
        this.textInput0.current.focus();
        break;
      case 1:
        this.textInput1.current.focus();
        break;
      case 2:
        this.textInput2.current.focus();
        break;
      default:
        this.textInput0.current.focus();
    }
  };
  render() {
    return (
      <React.Fragment>
        <input placeholder="textInput0" ref={this.textInput0} />
        <br />
        <input placeholder="textInput1" ref={this.textInput1} />
        <br />
        <input placeholder="textInput2" ref={this.textInput2} />
        <br />
        <button onClick={() => this.clickHandler("prev")}>Prev</button>
        <button style={{marginLeft: "20px"}} onClick={() => this.clickHandler("next")}>Next</button>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

在另一个组件的输入之间切换焦点

2 个答案: