如何将表单中的数据发布到本地 JSON 文件？

Question

我是 React 的新手，但我想掌握它。 获取数据最初是有挑战性的，但现在我必须将表单数据发布回 JSON 文件，您能帮我解决这个问题吗？

一点信息，我通过 App.js 从 data.json 获取数据，它有一个基本结构，如下所示：

    "payment": [
    {
          "nameId": 2,
          "amount": 10,
          "currency": "",
          "id": 1
    }]

另外有人可以建议一种方法，我可以使帖子有条件，这意味着，用户有 select 一个单选按钮，然后只有用户可以点击支付？ 先感谢您。

import React from 'react'
import './card-style.css'
import { useState } from 'react'
import ReactCardFlip from 'react-card-flip'
import { AiOutlineClose } from 'react-icons/ai'
import Axios from 'axios'

const CardUI = ({ charity }) => {
  return (
    <div className='section-center'>
      {charity.map((charityInfo) => {
        const { id, name, image } = charityInfo
        return <SingleCardUI id={id} name={name} image={image} />
      })}
    </div>
  )
}

function formSubmit() {
  return window.alert('Thank you')
}

function SingleCardUI(props) {
  const [isFlipped, setIsFlipped] = useState(false)
  const handleClick = () => {
    setIsFlipped(!isFlipped)
  }
  return (
    <article key={props.id} className='page-item'>
      <ReactCardFlip isFlipped={isFlipped} flipDirection='vertical'>
        <div className='card text-center shadow'>
          <div className='overflow location-front-item'>
            <img
              src={props.image}
              alt={props.name}
              className='card-img-top hova location-front-image'
            />
          </div>
          <div className='card-body text-dark'>
            <div className='titletxt'>
              <h4 className='card-title'>{props.name}</h4>
            </div>
            <div className='linkbtn'>
              <button
                className='btn btn-sm btn-outline-primary front-flip-button'
                id
                onClick={handleClick}
              >
                Donate
              </button>
            </div>
          </div>
        </div>
        {/* ... */}
        {/* BACK ITEM */}
        {/* ... */}

        <div className='card text-center shadow'>
          <div className='location-back-item'>
            <img
              src={props.image}
              alt={props.name}
              className='card-img-top location-back-image'
              style={{ opacity: 0.15 }}
            />
            <div className='card-img-overlay'>
              {/* ICON */}
              <div>
                <span
                  className='btn btn-sm back-flip-button close'
                  onClick={handleClick}
                >
                  <AiOutlineClose />
                </span>
              </div>
              <div className='container back-init'>
                <b>
                  <p>Select the amount to donate (USD)</p>
                </b>
                {/* 10 */}
                <div
                  className='form-check form-check-inline'
                  onSubmit={formSubmit}
                >
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio1'
                    value='option1'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio1'>
                    10
                  </label>
                  {/* 20 */}
                </div>
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio2'
                    value='option2'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio2'>
                    20
                  </label>
                </div>
                {/* 50 */}
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio3'
                    value='option3'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio3'>
                    50
                  </label>
                </div>
                {/* 100 */}
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio4'
                    value='option4'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio4'>
                    100
                  </label>
                </div>
                {/* 200 */}
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio5'
                    value='option5'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio5'>
                    200
                  </label>
                </div>
                {/* 500 */}
                <div className='form-check form-check-inline'>
                  <input
                    className='form-check-input'
                    type='radio'
                    name='inlineRadioOptions'
                    id='inlineRadio6'
                    value='option6'
                  />
                  <label className='form-check-label' htmlFor='inlineRadio6'>
                    500
                  </label>
                </div>
                <div className='container-fluid'>
                  <div className='pay'>
                    <button
                      className='btn btn-sm btn-outline-primary back-flip-button'
                      onClick={handleClick}
                      type='submit'
                    >
                      Pay
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className='card-body text-dark empty'></div>
        </div>
      </ReactCardFlip>
    </article>
  )
}

export default CardUI

Answer 1

你不能在 React 中访问文件系统，因为它在浏览器上运行。 您需要为这些操作创建服务器端 API。