Question

我想构建一个像这样的控件......

            <ClickLabelEdit labelText='sandwich'>
                <input type='text' value='sandwich' />
                <button onclick={this.closeForm} />
            </ClickLabelEdit>

ClickLabelEdit将有两种状态;显示只读标签并显示该标签的可编辑表单。单击标签，它将显示编辑表单。编辑表单详细信息将在属性中定义或作为子项定义，因此我们可以在此处包含任何类型的标记。在编辑表单中，我们需要一个钩子来告诉控件隐藏编辑表单并再次显示标签。

此ClickLabelEdit将是一个可重用的组件...用于我的应用程序周围的多个位置。标签和表格中使用的数据可以从redux商店获取。我认为定义标签或编辑表单是否应该显示的状态（或道具）并不属于redux存储区，因为在使用此控件时，状态/ prop必须重复，这可能会变得混乱。 / p>

因此...

将showEditForm prop / state
在哪里放置改变showEditForm prop / state
如何关闭编辑表单并再次显示标签（这将从编辑表单中触发）

我有这个工作，但我的主要问题是使用状态触发事件是可以接受的，就像我在下面所做的那样，即

onclick in children props - ＆gt;在父组件中设置状态 - ＆gt;更新孩子的状态

ClickLabelEdit.js

class ClickLabelEdit extends Component {
    constructor(props) {
        super(props)
        this.state = { showChildren: this.props.showChildren }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.closeForm === true) {
            this.setState({ showChildren: false });
        }
    }

    onLabelClick() {
        this.setState({ showChildren: true })
    }

    render() {
        return (
            <div>
                {
                    this.state.showChildren ?
                        this.props.children
                        :
                        <div onClick={this.onLabelClick.bind(this)}>
                            {this.props.labelValue}
                        </div>
                }
            </div>
        )
    }
}

export default ClickLabelEdit

使用

class ManualTester extends Component {
    constructor(props) {
        super(props)
        this.state = { value: 'sandwich', closeForm: false }
    }

    onSave() {
        //persist data
        this.setState({ closeForm: true })
    }

    render() {
        return (
            <div style={{ width: 250 }}>
                <ClickTextEdit labelValue={this.state.value} closeForm={this.state.closeForm}>
                    <input type='text' value={this.state.value} />
                    <button onClick={this.onSave.bind(this)}>close</button>
                </ClickTextEdit>
            </div>
        )
    }
}

export default ManualTester

在props.children中添加事件，在父级中设置状态，在子组件中设置状态是一种好习惯

0 个答案: