Question

我正在尝试使用自定义输入字段构建表单。问题是形式的结构是未知的。我希望它尽可能多地抽象出常见的功能。所以我创建了一个表单组件，它实际上将负责存储所有输入组件的值和提交时的操作。在表单中休息将由用户编写的html应该如何。

这是一张快照：

自定义输入字段：

class InputField extends React.Component {

    constructor(props, context) {
        super(props, context);

        this.state = {
            id: this.props.id,
            value: this.props.value || '',
            valid: this.props.isValidationRequired || this.props.required ? true : false,
            errorVisible: false,
            errorMessage: ''
        };
    }

    //different helper and conchange function

    render() {

        let props = this._getInputFieldProps();


                return (<div className={this.props.fieldParentClass}>
                    <label for={this.props.id}>{this.props.name}</label>
                    <input {...props}/>
                    <span className={this.state.errorVisible ? 'show' : 'hide'}>{this.state.errorMessage}</span>
                </div>)
    }

}

export default InputField;

形式： -

class FormComponent extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            submitButton: {
                buttonClasses: ['btn-default', 'vy-btn-secondary'],
                buttonText: "SUBMIT",
            }
        };
    }

    //functions for storing values of children and submit


    render() {
        return <form role="form" class="vm-form">
                    <Button disabled={this.state.submitValid} onClick={this._onSubmit.bind(this)} button={this.state.submitButton}></Button>
               </form>
    }
}

export default FormComponent;

和来电者类： -

class LeadDetails extends React.Component {

    constructor(HttpService, $state, VymoDataService, props, context) {
        super(props, context);
    }


    render() {
        return (<FormComponent >
            <InputField placeholder='hi' value="1"
            type="text"
            id="name"
            maxlength="10"></InputField>
        </FormComponent>)
    }
}

所以现在我可以将输入字段组件包装在一些html包装器中，并按照我想要的方式自定义外观。但是这里只有表单是渲染而不是输入字段，它的行为都不像子节点。

我是否在某种程度上完全错了。应该采取什么方法？

Answer 1

在FormComponent渲染方法中，您需要渲染“children”，它们位于this.props.children上：

render() {
    return <form role="form" class="vm-form">
                {this.props.children}
                <Button disabled={this.state.submitValid} onClick={this._onSubmit.bind(this)} button={this.state.submitButton}></Button>
           </form>
}

原因是当您实际创建（实例化）表单时，您正在执行以下操作：

<FormComponent >
    <InputField placeholder='hi' value="1"
    type="text"
    id="name"
    maxlength="10"></InputField>
</FormComponent>

组件标签之间的东西是“孩子”。子实例在实例化期间传递给您的组件（props.children），由组件来呈现这些子组件。您可能希望自动呈现子项的原因是因为React将<ReactComponents>与<normal-dom-elements>区别对待。

每当反应看到一个以大写字母开头的<Tag>时，它会认为它是一个反应组件并基本上将其转换为：

<Tag foo="bar"><div>hello</div></Tag>

这样的事情：

new Tag({
    foo: "bar",
    children: React.createElement('div', null, "hello")
})

将子组件放在reactjs

1 个答案: