将映射上下文记录反应到文本输入

Question

首先，我是 React 新手，无法找到问题的答案。

我想在多个 React 组件之间共享 JSON 记录的值，并在一系列文本框中显示和编辑这些值。我对组件之间的共享有所了解，但是...

问题：我无法将输入框正确映射到上下文组件中的值...请帮助

所以我创建了一个 Context 组件来表示我需要存储的数据：

数据存储：

import { useState, createContext } from 'react'

export const AddressContext = createContext();

export const AddressProvider = (props) => {
    const [address, setAddress] = useState({
        "line1": "1",
        "line2": "2",
        "line3": "3",
        "town": "4",
        "county": "5",
        "postcode": "6",
        "country": "7",
      })

    return (
<AddressContext.Provider value={[address, setAddress]}>
     {props.children}
</AddressContext.Provider>
    )
}

然后在另一个组件中显示输入框和地图值 输入和显示

import {  useContext } from 'react'
// Store for address information
import { AddressContext } from './SPLAddress'


const ShipAddress = () => {
        const [address, setAddress] = useContext(AddressContext) ;

    return (
        <div>
           <h2 >Shipping Address</h2> 

           <form className='add-form'>
           <div className='form-control'>
                        <label>Line 1:</label>
                        <input type='text' placeholder='Line1' 
                         defaultValue ={address.line1} 
                         /* onChange={(e) => address.line1 = e.target.value} */
                          /*  onChange={(e) => setAddress(changedRecord => [address, {line1: e.target.value} ]) }  */
                           onChange={(e) => setAddress(changedRecord => [address, {line1: e.target.value} ]) }  
                         />
                </div>

AND SO ON...
            </form>
        </div>
    )
}
 
export default ShipAddress

从 cmets 中可以看出，我曾多次尝试 onChange 事件，但无法让 onChange 事件更改第一个 JSON 记录中的适当值。

我也猜想通过使用defaultValue ={address.line1} 应用程序对值所做的任何更改都不会在 UI 中更新。使用value={address.line1} 锁定输入。

APP 级别 而在APP层面，我们已经用AddressProvider封装了组件

<AddressProvider>
      <SPLSearch searchButton={SPLsearchButton}/>

      {showSearchList &&
              <SPLList lines={lines}  selected={SPLselected}  />
      }
      {!showSearchList &&
              <ShipAddress l />
      }
  </AddressProvider>

Answer 1

你可以这样做：

const ShipAddress = () => {
  const [address, setAddress] = useContext(AddressContext) ;

  return (
    <div>
       <h2>Shipping Address</h2> 

       <form className='add-form'>
        <div className='form-control'>
                <label>Line 1</label>
                <input 
                  value={address.line1} 
                  onChange={e => setAddress(prevAddress => ({
                      ...prevAddress, 
                      line1: e.target.value 
                  }))}
                />
        </div>
       </form>
    </div>
  )
}