Question

我已经在响应中创建了一个表单，经过研究后，我认为如果您不想使用外部库来管理表单，则上下文可能是最佳选择，尤其是在我组成它的许多嵌套组件。但是，我不确定将函数放入我的状态是否是件好事。但是让我给你一些代码：

configuration-context.js

import React from 'react'

export const ConfigurationContext = React.createContext();

ConfigurationPanel.jsx

import React, { Component } from 'react'
import { Header, Menu, Grid } from 'semantic-ui-react'
import ConfigurationSection from './ConfigurationSection.jsx'
import {ConfigurationContext} from './configuration-context.js'


class ConfigurationPanel extends Component {


    constructor(props) {
        super(props)
        this.state = { 
            activeItem: '', 
            configuration: {
                       /* the configuration values */
              banana: (data) => /* set the configuration values with the passed data */
            }
        }

    }

    handleItemClick = (e, { name }) => this.setState({ activeItem: name })


    render() {
        return (
            <ConfigurationContext.Provider value={this.state.configuration}>
                <Grid.Row centered style={{marginTop:'10vh'}}>
                    <Grid.Column width={15} >   
                        <div className='configuration-panel'>

                    /* SOME BUGGED CODE */ 

                            <div className='configuration-section-group'>
                                {this.props.data.map((section, i) => <ConfigurationSection key={i} {...section} />)}
                            </div>
                        </div>
                    </Grid.Column>
                </Grid.Row> 
            </ConfigurationContext.Provider>
        )
    }
}

ConfigurationItem.jsx

import React, { Component } from 'react'
import { Input, Dropdown, Radio } from 'semantic-ui-react'
import {ConfigurationContext} from './configuration-context.js'

class ConfigurationItem extends Component {
    static contextType = ConfigurationContext


    constructor(props) {
        super(props)
    }

    handleChange = (e, data) => this.context.banana(data)

    itemFromType = (item) =>{
        switch (item.type) {
            case "toggle":
                return  <div className='device-configuration-toggle-container'> 
                            <label>{item.label}</label>
                            <Radio name={item.name} toggle className='device-configuration-toggle'onChange={this.handleChange} />
                        </div> 

            /* MORE BUGGED CODE BUT NOT INTERESTING*/

        }
    }

    render() {
        return this.itemFromType(this.props.item)
    }
}

因此，最后，我有一个ConfigurationContext只是一个声明，所有内容都在父状态内。我不喜欢的事情是将香蕉函数放入状态内（它将具有更多逻辑，只需记录它即可）你怎么看待这件事？任何建议表示赞赏。

谢谢

Answer 1

banana只是一个常规函数，您不必将其置于状态，只需执行以下操作：

class ConfigurationPanel extends Component {
    banana = data => console.log(data)
    ...

    render() {
        return (
            <ConfigurationContext.Provider value={{banana}}>
    ...

}

之后，您可以照常使用this.context.banana(data)。

不知道我是否正确使用了React上下文

1 个答案: