Question

当您单击将重点转移到该月报告的月份时，我就有一个时间轴部分

我已经使用裁判来尝试实现这一目标。我在时间轴上单击某个元素时会更新状态，因此我在componentDidUpdate方法中使用了焦点功能

data.map(factsheet => {
  const heading = factsheet && toShortFormat(factsheet.month).slice(3);
  return (
    <Cell extraClasses="factsheets-container">
      <p className="month-name" ref={heading}>{heading}</p>
      <Cell extraClasses="factsheets">
        {this.factsheetsList(factsheet.factsheets)}
      </Cell>
    </Cell>
  )
});

此代码段用于onclick函数中的参考

const ref = `${month}-${year}`;
this.setState({
  ref: this.refs[ref],
})

这是componentDidUpdate函数

componentDidUpdate () {
  const { ref } = this.state
  ref && ReactDOM.findDOMNode(ref).focus();
}

焦点没有转移

Answer 1

我不确定您如何使用ref，因为我们看不到您的整个组件，但是，据我所知，出了点问题（例如，您应该有一个{{1 }}中的每个refObject，并且您不应在状态中保存引用。）
我什至看不到Cell函数的触发位置：）

无论如何，这里有个小提琴可以帮助您：

onClick

const data = [
    {title: "Foo"},
    {title: "Bar"},
    {title: "Miz"}
];

class App extends React.Component {
    inputListRef;
    
    constructor(props) {
        super(props);
        
        this.inputListRef = Array.from({ length: props.data.length}, () => React.createRef());
    }
    
    handleClick = (e) => {
        const dataIndex = e.target.getAttribute("data-index");
        this.inputListRef[dataIndex].current.focus()
        console.log();
    }
    
    render() {
        return (
            <React.Fragment>
                <h1>Your Data</h1>
                {this.props.data.map((el, index) => {
                    return (
                        <div className="data-cell">
                            <button data-index={index} onClick={this.handleClick}>Click me for Focus</button>
                            <input type="text" ref={this.inputListRef[index]} value={el.title}></input>
                        </div>
                    );
                })}
            </React.Fragment>
        );
    }
}

ReactDOM.render(<App data={data}/>, document.getElementById('root'));

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

.data-cell {
    border: 1px solid rgba(0,0,0,0.5);
    display: block;
    width: 300px;
    padding: 10px;
}

.data-cell + .data-cell {
    margin-top: 20px;
}

我使用了<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>元素，因此您可以轻松查看焦点。如您所见，我创建了一个引用数组，并将每个input元素保存在该数组的一个不同条目中。

注意，我使用了input自定义属性：您还可以编写data-index并更改onClick={() => this.handleClick(index)}以使用数字参数；我之所以写是因为我想避免在handleClick()方法中使用箭头功能。

对您有帮助吗？

如何使用refs将焦点转移到P元素？

1 个答案: