Question

我们的想法是创建一个表单，该表单将验证输入并将所有逻辑用于验证MyForm组件内部。所以唯一来自onsubmit调用的是一个错误对象和一个具有表单值的对象。

我还想验证用户点击提交的时间以及用户使用onBlur触及字段的时间。我想保留MyForm中的所有逻辑

问题是我正在试图弄清楚如何从MyForm组件更改InputGroup道具并显示验证错误。当用户点击提交按钮或触摸某个字段并在InputGroup中调用handleBlur时，如何更改为子项的道具。

还告诉我这是一种错误的做法

我设法在运行时从MyForm更改InputGroup的道具。这将改变每个孩子的标签。

children = React.Children.map(this.props.children, (child) =>
  React.cloneElement(child, {
    label: 'foo'
  })
 )

 ...

 return (
    <form onSubmit={this.validate}>
       {children}
    </form>
 )

NewCustomerContainer：

class NewCustomerContainer extends Component {

    handleSubmit(errors, customer) {
        // if errors is empty do something with customer
    }

    render() {
        return (
            <div className={shared.flexRow}>
                <div className={shared.flexColumn}>
                    <ColumnHeader
                        headerTitle="New Customer" />
                    <MyForm formHandler={this.handleSubmit}>

                        <InputGroup
                            type="text"
                            label="Customer Name"
                            placeholder="Customer Name"
                            name="customerName"
                            isRequired={true} />
                        <InputGroup
                            type="text"
                            label="Customer Number"
                            placeholder="Customer Number"
                            name="customerNumber" />
                        <InputGroup
                            type="text"
                            label="Customer Email"
                            placeholder="Customer Email"
                            name="customerEmail"
                            isRequired={true}
                            validateOption="email" />
                    </MyForm>
                </div>
            </div>
        )
    }
}

export default NewCustomerContainer

MyForm的

    export class MyForm extends Component {

        validate(e) {
            e.preventDefault()

            children = React.Children.map(this.props.children, (child) =>
              React.cloneElement(child, {
                label: 'foo'
              })
            )

            // handle validation login here
            // then call the parent function with the errors and values

            this.props.testForm(errors, values)
        }

        render() {
          const children = React.Children.map(this.props.children, (child) =>
            React.cloneElement(child, {

            })
          )
          return (
            <form onSubmit={this.validate}>
                {children}
            </form>
          )
        }
    }

InputGroup：

export class InputGroup extends Component {

    handleBlur() {
       // handle blur here
    }

    render() {
        return (
            <div className={shared.formGroup}>
                <label className={shared.formLabel}>{this.props.label}</label>
                <input className={shared.formError} type={this.props.type} name={this.props.name} placeholder={this.props.placeholder} onBlur={this.handleBlur} />
                <span className={shared.formError}>{this.props.foo}</span>
            </div>
        )
    }
}

我对React很新，我知道我可以使用redux-form或其他插件，但我想挑战自己并理解儿童如何工作的概念。有很多例子，但他们没有回答我的问题

提前感谢。

如何在初始渲染后用新道具重新克隆克隆孩子

0 个答案: