Question

我试图创建一个可自定义的登录组件，以便默认情况下，用户不必包含输入，但是如果他们需要自定义输入，他们只需传入输入并包含一个参考

例如：

// normal usage
<Register type={'username-password'} />

// custom usage
<Register type='username-password'>
  <input ref='email' />
  <input ref='password' />
  <input ref='submit' />
</Register>

但是，当注册组件的表单触发onSubmit时，我无法访问输入元素。我尝试在this.props.children骑自行车，但无法弄清楚如何进入。如何访问文本值？

我意识到你真的不应该这样做，但在这种情况下，我不确定如何解决它并仍然有一个很好的API。

Answer 1

虽然我的直觉告诉我应该有一种更优雅的方式，但这对我有用。希望这会有所帮助。

var Register = React.createClass({
    // omitted the other lifecycle and defaults. no need for example.

    componentWillMount: function() {
        var chillin = this.props.children.map(function(elem){
            return elem.props.value;
        })

        this.setState({
            chillin: chillin
        })
    },
    render: function() {
        return (
                <div>
                    Input Values:  {this.state.chillin}
                </div>
        )
    }
});


React.render(
        <Register name="test" >
            <input type="text" value="blue" ref="email" />
            <input type="text" value="99999" ref="age" />
        </Register>, document.getElementById('r'));

注意：当然，我将其中的值硬编码为快速的概念证明。

父母表格访问儿童如何输入？

1 个答案: