Question

我刚刚完成了一个很大的项目，该项目在react应用的不同部分使用了表单。整个表单都是相同的，但是功能根据表单的使用位置而有所不同。

所以现在我有多个具有重复表格的组件。所有这些表格都是受控的，即（使用this.state ...作为值），唯一的区别是呈现方法和某些按钮事件上的表格数据会发生什么。

我意识到这是可怕的编码，我真的想使用HOC使这些组件更灵活，更干净。

这是其中一种形式，还有2种与此类似。

sampleForm = (
            <form action="" name="sample">
                <div className="group">
                    <label htmlFor="">Descriptive Name:</label>
                    <input type="text" name="name" value={this.state.name}
                        onChange={this.handleChange} placeholder="Descriptive Name" />
                </div>
                <div className="group">
                    <label>Sample Codename:</label>
                    <input type="text" name="codeName" value={this.state.codeName}
                        onChange={this.handleChange} placeholder="Ex: MM_MG_01" />
                </div>
                <div className="group">
                    <label htmlFor="">GPS Coordinates:</label>
                    <input type="text" name="coords" value={this.state.coords}
                        onChange={this.handleChange} placeholder="GPS Coordinates" />
                </div>
                <div className="group">
                    <label htmlFor="">Metagenomic Data:</label>
                    <textarea type="text" name="METAdesc" value= 
                     {this.state.METAdesc}
                        onChange={this.handleChange} placeholder="Image Description" rows={7} />
                    <input type="file" name="METAimage"
                        onChange={this.handleChange} />
                </div>
                {notes}
            </form>
        )

我目前在render方法中重复了这三个步骤（四次：/）

如何将这三个部分传递给组件？

Answer 1

高阶组件是一种React模式，其中：

一个函数接受一个Component并返回一个新的Component。 https://reactjs.org/docs/higher-order-components.html

HOC可以为表单做的一件事是管理状态，处理诸如onChange和onSubmit之类的事件等。因此，将Form组件视为作为参数传递到您的FormHandler HOC的功能组件。

例如，

在FormHandler.js

const withFormHandling = FormComponent => class extends Component {/* Component Logic */}
export default withFormHandling

在Form.js

import withFormHandling from './path/to/Components/FormHandler'
const Form = props => {/* Component Logic */}
export default withFormHanlding(Form);

那我们如何处理多种不同形式的形式细节，道具和状态？

确定每种形式应具有的状态或道具

在您的情况下，可能是以下情况：

formAction
formName
handleChange
handleSubmit
inputNames
notes
errors

我会考虑传入inputNames和errors作为道具（它们在结构上应该匹配）。您可以在此处添加各种复杂性或使其保持简单。就个人而言，我保持fields对象和errors对象的状态，两者都具有匹配的键。一个用于维护用户输入的值，另一个用于存储字段验证的结果。

然后填写我们的HOC

const withFormHandling = FormComponent => class extends Component {
    constructor(props) {
        super(props)
        this.state = {
            fields: {...props.inputNames},
            errors: {...props.errors},
            selectedFile: null
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleFile = this.handleFile.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    // https://codeburst.io/save-the-zombies-how-to-add-state-and-lifecycle-methods-to-stateless-react-components-1a996513866d 
    static get name() {
        return Component.name;
    }

    handleChange(e) {
        const target = e.target;
        let value = target.type === 'checkbox' ? target.checked : target.value;
        let name = target.name;
        const fields = {...this.state.fields},  errors = {...this.state.errors};
        const error = //create a validation function that returns an error based on field name and value
        fields[name] = value;
        errors[name] = error;
        this.setState({ fields, errors })
    }

    handleFile(e) {
        this.setState({selectedFile: event.target.files[0]})
    }

    handleSubmit(e) {
        //validate form
        //flatten fields into structure of data for form submission
        //handle submission of data and also file data
    }

    render() {
        return <FormComponent 
                   {...this.props} //to access form specific props not handled by state
                   fields={this.state.fields}
                   errors={this.state.errors}
                   handleChange={this.handleChange}
                   handleFile={this.handleFile}
                   handleSubmit={this.handleSubmit}
               />
    }
}
export default withFormHandling

此模式之所以有效，是因为返回的Component的render函数呈现了作为参数传递给HOC函数的Form Component。

因此，您可以使用此HOC作为处理程序来创建任意数量的Forms。您可以考虑将一棵代表表单输入结构的树放入HOC中，以使其更加模块化和可重用。

现在，让我们为您提供的示例填写Form.js：

import withFormHandling from './path/to/Components/FormHandler'
const Form = ({formAction, formName, handleChange, handleFile, handleSubmit, fields, errors, notes}) => {
    return (
        <form action={formAction} name={formName} onSubmit={handleSubmit}>
            <div className="group">
                <label htmlFor="name">Descriptive Name:</label>
                <input type="text" name="name" value={fields.name}
                    onChange={handleChange} placeholder="Descriptive Name" />
            </div>
            <div className="group">
                <label htmlFor="codeName">Sample Codename:</label>
                <input type="text" name="codeName" value={fields.codeName}
                    onChange={handleChange} placeholder="Ex: MM_MG_01" />
            </div>
            <div className="group">
                <label htmlFor="coords">GPS Coordinates:</label>
                <input type="text" name="coords" value={fields.coords}
                    onChange={handleChange} placeholder="GPS Coordinates" />
            </div>
            <div className="group">
                <label htmlFor="METAdesc">Metagenomic Data:</label>
                <textarea type="text" name="METAdesc" value= 
                 {fields.METAdesc}
                    onChange={handleChange} placeholder="Image Description" rows={7} />
                <input type="file" name="METAimage"
                    onChange={handleFile} />
            </div>
            {notes}
        </form>
    )
}
export default withFormHanlding(Form);

最后，在其他某些组件中，您可以根据需要多次调用Form组件，并传递独特的道具。

//...some other Component Render Method

// form one, with its own internal state managed by HOC
<Form formAction={'https://someendpoint1'} formName={"some form 1"} inputNames={{name:'', codename:''}} errors={{name:'', codename:''}} notes={"some notes 1"}/>

// form two, with its own internal state managed by HOC
<Form formAction={'https://someendpoint2'} formName={"some form 2"} inputNames={{name:'', codename:''}} errors={{name:'', codename:''}} notes={"some notes 2"}/>

// form three, with its own internal state managed by HOC
<Form formAction={'https://someendpoint3'} formName={"some form 3"} inputNames={{name:'', codename:''}} errors={{name:'', codename:''}} notes={"some notes 3"}/>

这就是我处理具有相似结构的许多不同形式的应用程序的方式。

要考虑的另一种模式是render props，但我将把这个问题留给另一个问题和另一个受访者。

使用带有表单的HOC。传递普通的JSX并使用HOC声明状态

1 个答案: