Question

我正在尝试使用react来管理一个复选框。以下代码运行良好，但我想重构render方法中的代码，以便它使用Component。我想将ref传递给该组件，但我无法弄清楚如何去做。

  int n = 0;
  cnt = scanf("%4[^\n]%n", buf, &n);  // Cumbersome to get that 4 here.
  // Lots of TBD code now needed:
  // Handle if cnt != 1 (\n to be read or EOF condition)
  // Handle if n == sizeof buf - 1, (0 or more to read)
  // Handle if n < sizeof buf - 1, (done, now get \n)
  // A \n may still need to be consumed
  // Handle EOF conditions

我在想这样的事情

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>)
};

这显然不起作用。我该怎么做呢？

Answer 1

将回调引用传递到Component，如下所示：

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

哦，顺便说一句，请始终使用回调参考。 Read more here

要考虑的另一个想法是：将checked的{{1}}值完全移至checkbox组件的状态，然后使用a fully controlled component。这总是比具有更大可预测性和更少惊喜的AreRefsAwesomeCheckbox更好。

完整代码：

ref

Answer 2

使用createRef创建您最终传下来的参考。

如果要将引用传递给功能组件，请使用React.forwardRef。

如果您要将引用传递给 class组件，请确保道具名称为ref以外的任何名称，否则您将收到special prop警告。

反应 - 传递裁判作为道具

2 个答案: