当用户更改表单中的输入时更新所选对象 [英] Updating a selected object when user changes inputs in a form

问题描述

当用户点击一个方块时，它会变成 currentHtmlObject.我希望人们能够在右侧边栏中更新它的属性.

我不知道如何获取单个输入字段并更新我处于 react-redux 状态的对象的属性并更新主查看区域 DrawingCanvas.

我有点接近我在表单中输入的信息正在激活我的减速器和动作.但是我不知道如何区分left 和top.

//反应从反应"导入反应导出类 RightSidebar 扩展 React.Component {构造函数(道具){超级(道具)}句柄变化(evt){控制台日志(evt)this.props.onUpdateCurrentHtmlObject(evt.target.value)}使成为() {const { currentHtmlObject } = this.props返回 (<表格>{this.props.currentHtmlObject.id}<div className="右侧边栏"><div className="form-group"><label>位置X</label><输入类型=数字"名称=左"className="表单控件"值={this.props.currentHtmlObject.styles ?this.props.currentHtmlObject.styles.left : ''}onChange={this.handleChange.bind(this)}/>

<div className="form-group"><label>位置Y</label><输入类型=数字"className="表单控件"值={this.props.currentHtmlObject.styles ?this.props.currentHtmlObject.styles.top : ''}onChange={this.handleChange.bind(this)}/>

</表单>)}}RightSidebar.defaultProps = {当前HtmlObject:{样式:{左:空，顶部:空}}}

解决方案

无需区分 left 和 top，假设您有一个名为 update 的操作，它所做的只是更新所选对象的属性.下面是 action 方法的样子:

updateSelectedObj(id, payload){返回 {类型:UPDATE_SELECTED_OBJ，身份证:身份证，有效载荷:有效载荷}}

以下是您的事件处理程序在 class RightSidebar 中的样子:

handleChange(evt) {//由于您的顶部和左侧输入字段具有相应的名称属性，因此 evt.target.name 将返回 `left` 或 `top`store.dispatch(updateSelectedObj({styles:{evt.target.name:evt.target.value}})}

这是您的减速器:

[UPDATE_SELECTED_OBJ]: (state, action) =>{//我假设你在画布中有一个对象列表，但只有一个可以//一次被选中.我假设列表的名称是 objList让 selectedObj = state.objList.filter(obj => obj.id == action.id)[0]selectedObj = Object.assign({}, selectedObj, action.payload)return { objList: state.objList.map(obj => obj.id === action.id?Object.assign({}, obj, selectedObj : obj) }}

When a user clicks a square it becomes currentHtmlObject. I want people to be able to update it's properties in the right sidebar.

I have no idea how to take a single input field and update an object's property that I'm holding in a react-redux state and update the main viewing area DrawingCanvas.

I got kinda close where the info I was entering into the form was activating my reducers and actions. But I couldn't figure out how to distinguish between left and top.

// React
import React from 'react'

export class RightSidebar extends React.Component {
    constructor(props) {
        super(props)
    }

    handleChange(evt) {
        console.log(evt)
        this.props.onUpdateCurrentHtmlObject(evt.target.value)
    }

    render() {
        const { currentHtmlObject } = this.props

        return (
            <form>
                {this.props.currentHtmlObject.id}
                <div className="right-sidebar">
                    <div className="form-group">
                        <label>Position X</label>
                        <input
                            type="number"
                            name="left"
                            className="form-control"
                            value={this.props.currentHtmlObject.styles ? this.props.currentHtmlObject.styles.left : ''}
                            onChange={this.handleChange.bind(this)} />
                    </div>

                    <div className="form-group">
                        <label>Position Y</label>
                        <input
                            type="number"
                            className="form-control"
                            value={this.props.currentHtmlObject.styles ? this.props.currentHtmlObject.styles.top : ''}
                            onChange={this.handleChange.bind(this)} />
                    </div>
                </div>
            </form>
        )
    }
}

RightSidebar.defaultProps = {
    currentHtmlObject: {
        styles: {
            left: null,
            top: null
        }
    }
}

解决方案

There is no need to distinguish between left and top, let's assume you have an action named update and all it does is to update a selected object's property. Here is what the action method may look like:

updateSelectedObj(id, payload){
    return {
        type: UPDATE_SELECTED_OBJ,
        id: id,
        payload: payload
    }
}

Here is what your event handler might look like in class RightSidebar:

handleChange(evt) {
    // since your top and left input fields have a corresponding name property, evt.target.name will return either `left` or `top`
    store.dispatch(updateSelectedObj({styles:{evt.target.name:evt.target.value}})
}

Here is your reducer:

[UPDATE_SELECTED_OBJ]: (state, action) => {
    // I assume you have a list of objects in the canvas but only one can
    // be selected at a time. and I assume the name of the list is objList
    let selectedObj = state.objList.filter(obj => obj.id == action.id)[0]
    selectedObj = Object.assign({}, selectedObj, action.payload)
    return { objList: state.objList.map(obj => obj.id === action.id? Object.assign({}, obj, selectedObj : obj) }
}

这篇关于当用户更改表单中的输入时更新所选对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！