React - 将 refs 作为props传递

IT技术 reactjs
2021-05-18 15:30:24

我正在尝试使用 react 管理复选框。以下代码运行良好，但我想重构渲染方法中的代码，以便它使用 Component。我想将 ref 传递给该组件，但我不知道该怎么做。

export default class AreRefsAwesomeCheckbox extends Component {
    constructor(props) {
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange() {
        let data = {
            isFeatured: this.refs.check_me.checked
        };
        postJSON('/some/url', data);
    }


    componentDidMount() {
        const data = getJSON('/some/url');
        data.then(object => {
                this.refs.check_me.checked = object.will_i_have_a_nice_checkbox;
            }
        )
    }

    render() {
        return (
            <div>
                <label>
                    <input ref="check_me" type="checkbox" 
                           onChange={this.handleInputChange}/>
                    <div>Are refs good?</div>
                </label>

            </div>
        );
    }
}

我在想这样的事情 

const Checkbox = ({myRef, changeInput, checkboxText}) => {
    return (
        <label>
            <input type="checkbox" ref={myRef} onChange={(event) => changeInput(event)}/>
            <div> {checkboxText} </div>
        </label>)
};

然后把这个片段放在渲染方法中

<Checkbox myRef="check_me" changeInput={this.handleInputChange} checkboxText="Are refs good?"/>

这显然行不通。我该怎么做呢？

2个回答

使用createRef创建您最终传递的 ref。

如果您将 ref 传递给函数组件，请使用React.forwardRef。

如果您将 ref 传递给类组件，请确保props名称不是任何内容，否则ref您将收到一个特殊的props警告。

将回调 ref 传递到 中Component，如下所示：

<Checkbox myRef={ref => (this.checkbox = ref)} />

哦，顺便说一句，请始终使用回调引用。在这里阅读更多。

另一个需要考虑的想法：将full的checked值移动checkbox到AreRefsAwesomeCheckbox组件的状态并使用完全受控的 component。这总是比ref具有更大可预测性和更少惊喜的更好。

完整代码：

const Checkbox = ({myRef, changeInput, checkboxText}) => {
  return (
    <label>
      <input
        type="checkbox"
        ref={myRef}
        onChange={event => changeInput(event)}
      />
      <div> {checkboxText} </div>
    </label>
  )
}

export default class AreRefsAwesomeCheckbox extends Component {
  constructor(props) {
    super(props)
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  handleInputChange() {
    let data = {
      isFeatured: this.refs.check_me.checked,
    }

    postJSON('/some/url', data)
  }

  componentDidMount() {
    const data = getJSON('/some/url')
    data.then(object => {
      // this.checkbox is the reference to the checkbox element you need
      this.checkbox.checked = object.will_i_have_a_nice_checkbox
    })
  }

  render() {
    return (
      <div>
        <label>
          <Checkbox myRef={ref => (this.checkbox = ref)} />

          <div>Are refs good?</div>
        </label>
      </div>
    )
  }
}
其它你可能感兴趣的问题
上一篇3D打印汽车铝气门盖 下一篇将外部 JavaScript（来自 cdn）捆绑到 React 组件中