react怎么存上一页_在React中创建一个保存数据的表单

我正在尝试在react中创建一个客户详细信息表单(当前使用react-json-form),我可以在其中重新使用输入中的值来创建应用程序可以引用的保存文件至。我已经创建了表单并可以输出结果,但我不确定如何保存输入值以备将来使用,或者在保存后再调用它们。在React中创建一个保存数据的表单

如果任何人有任何建议或这样做的形式的例子,那么我会非常感激。

我的代码如下:

import React, { Component } from 'react';

import JSONTree from 'react-json-tree';

import { BasicForm as Form, Nest, createInput } from 'react-json-form';

const Input = createInput()(props => );

const UserFields =() => (

User

Name:
Email:

);

export default class ExampleForm extends Component {

state = { data: {} };

updateData = data => this.setState({ data });

render() {

return (

Submit

true} />

);

}

}

2017-08-25

CJNotts

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在 React 函数组件点击编辑保留原数据并创建新数据的功能,可以考虑以下步骤: 1. 在组件的 state 添加一个 editable 属性,用来表示当前组件是否处于可编辑状态。 2. 在组件添加一个编辑按钮,当点击该按钮时,将 editable 属性设置为 true,使组件进入编辑状态。 3. 在组件添加一个保存按钮,当点击该按钮时,将 editable 属性设置为 false,并且将组件数据保存到新的数据对象。 4. 如果用户取消编辑,可以添加一个取消按钮,当点击该按钮时,将组件的数据重置为原始数据,并将 editable 属性设置为 false。 下面是一个简单的示例代码: ```jsx import React, { useState } from "react"; function EditableData({ data }) { const [editable, setEditable] = useState(false); const [formData, setFormData] = useState(data); const handleEdit = () => { setEditable(true); }; const handleSave = () => { setEditable(false); // 将 formData 保存到新的数据对象 const newData = { ...formData }; // TODO: 保存 newData 到数据库或其他地方 }; const handleCancel = () => { setEditable(false); setFormData(data); }; const handleInputChange = (event) => { const { name, value } = event.target; setFormData((prevData) => ({ ...prevData, [name]: value })); }; return ( <div> <div> Name: {editable ? <input name="name" value={formData.name} onChange={handleInputChange} /> : data.name} </div> <div> Age: {editable ? <input name="age" value={formData.age} onChange={handleInputChange} /> : data.age} </div> <button onClick={handleEdit}>Edit</button> {editable && ( <> <button onClick={handleSave}>Save</button> <button onClick={handleCancel}>Cancel</button> </> )} </div> ); } export default EditableData; ``` 在上面的示例代码,我们定义了一个 EditableData 组件,该组件接收一个 data 属性,表示需要编辑的数据。在组件,我们使用 useState 钩子来保存 editable 和 formData 状态,其 editable 表示当前组件是否处于可编辑状态,formData 保存当前组件的表单数据。 在组件,我们使用条件渲染来渲染不同的内容,如果组件处于可编辑状态,我们显示 input 元素,否则显示数据。当点击 Edit 按钮时,我们将 editable 属性设置为 true,使组件进入可编辑状态。当点击 Save 按钮时,我们将 editable 属性设置为 false,并且将组件数据保存到新的数据对象。如果用户取消编辑,我们将组件的数据重置为原始数据,并将 editable 属性设置为 false。 希望这个示例代码能够对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值