When development web application, sometime, we need to update just one or two property of an entity with many fields. Actually it is so sure to not update all the fields when user just update some part of the entity.
In React, it is one-way data biding. For example, you bind the object property value to an input field. When you change the field value, it won’t change the object property value accordingly. You need to hand it by yourself.
To do that, we need to pull out the delta changes and pass that to server and handle the update specifically.
First, capture the delta changes in React
You can use React useState() hooks to initial the entity with empty object
const EntityMasterComponent = (entity) => {
const [entity, updateEntity] = useState(entity);
const [deltaChange, updateDeltaChange] = useState({});
...
const handleChange = (fieldName, fieldValue) => {
updateDeltaChange({
...deltaChange,
[fieldName]: fieldValue
})
}
...
return (<div><form>
<input name="field1" value={entity.field1} onChange={event => handleChange('field1', event.currentTarget.value)} />
<input name="field2" value={entity.field2} onChange={event => handleChange('field2', event.currentTarget.value)} />
...
</form></div>)
}
From the above example, we define a deltaChange state with an empty object. Every time when some field is updated, the handleChange function is called and the field name and value is set into the deltaChange state.
When user want to save the change, you can pass the deltaChange state into the request body as below:
const doSave = () => {
fetch("/entity/" + entity.id, {
method: 'put',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(deltaChange)
}).then(resp => resp.json())
.then(resp => console.log(resp.msg))
.catch(err => console.log(err));
}
On server side, you should be able to get the map of delta changes and process validation and update storage.
chooli.yip 你好, 我是国内准备做国产化plm 的开发人员,请问你现在在upchain 具体产品能否给个测试账号我们? 一直在linkedin 上面想跟你联系 但是联系不上。
LikeLike
你好,你可以发邮件到sales@upchain.com或者尝试使用upchain首页的request demo来申请测试账户。目前线上的版本还没有中文版的提供,如果你不介意使用英文版。
LikeLike