Question

我有一个ReactJS CRUD应用程序。

用户为销售平台提交商品，必须输入3个值，即商品，颜色，价格。

现在，该应用必须具有以下功能，尤其是在颜色字段上。

域///范围石灰色///深灰色午夜黑///黑色神秘银///银

字典的Domain代表要转换的原始值，字典的Range代表所需的值。

我尝试了许多方法，但是无法弄清楚将用户输入转换为所需值的位置。错误的值应该是可提交的，但是当用户键入以使用所需值时显示警报时，如果提交错误（如果用户提交了Mystic Silver），则将弹出一个跨度并要求用户更新该值达到理想值。

App.js看起来像这样

const App = () => {
// Data
const usersData = [
    { id: 1, product: 'Apple iPhone 6s', color: 'Stonegrey', price: 'CHF 769' },
    { id: 2, product: 'Samsung Galaxy S8', color: 'Midnight Black', price: 'CHF 569' },
    { id: 3, product: 'Huawei P9', color: 'Mystic Silver', price: 'CHF 272' },
]

const initialFormState = { id: null, product: '', color: '', price: '' }

// Setting state
const [ users, setUsers ] = useState(usersData)
const [ currentUser, setCurrentUser ] = useState(initialFormState)
const [ editing, setEditing ] = useState(false)

// CRUD operations
const addUser = user => {
    user.id = users.length + 1
    setUsers([ ...users, user ])
}

const deleteUser = id => {
    setEditing(false)

    setUsers(users.filter(user => user.id !== id))
}

const updateUser = (id, updatedUser) => {
    setEditing(false)

    setUsers(users.map(user => (user.id === id ? updatedUser : user)))
}

const editRow = user => {
    setEditing(true)

    setCurrentUser({ id: user.id, product: user.product, color: user.color, price: user.price })
}

return (
    <div className="container">
        <h1>CRUD App for dictionary tables</h1>
        <div className="flex-row">
            <div className="flex-large">
                {editing ? (
                    <Fragment>
                        <h2>Edit table</h2>
                        <EditUserForm
                            editing={editing}
                            setEditing={setEditing}
                            currentUser={currentUser}
                            updateUser={updateUser}
                        />
                    </Fragment>
                ) : (
                    <Fragment>
                        <h2>Add dictionary</h2>
                        <AddUserForm addUser={addUser} />
                    </Fragment>
                )}
            </div>
            <div className="flex-large">
                <h2>View dictionaries</h2>
                <UserTable users={users} editRow={editRow} deleteUser={deleteUser} />
            </div>
        </div>
    </div>
)

}

添加用户功能在此组件中。

const AddUserForm = props => {
const initialFormState = { id: null, product: '', color: '', price: '' }
const [ user, setUser ] = useState(initialFormState)

const handleInputChange = event => {
    const { name, value } = event.target

    setUser({ ...user, [name]: value })
}

return (
    <form
        onSubmit={event => {
            event.preventDefault()
            if (!user.procuct || !user.color || !user.price) return

            props.addUser(user)
            setUser(initialFormState)
        }}
    >
        <label>Product</label>
        <input type="text" name="product" value={user.product} onChange={handleInputChange} />
        <label>Color</label>
        <input type="text" name="color" value={user.color} onChange={handleInputChange} />
  <label>Price</label>
        <input type="text" name="price" value={user.price} onChange={handleInputChange} />
        <button>Add new Dictionary</button>
    </form>
)
}

编辑/更新条目。

const EditUserForm = props => {
const [ user, setUser ] = useState(props.currentUser)

 useEffect(
  () => {
   setUser(props.currentUser)
  },
  [ props ]
  )


 const handleInputChange = event => {
 const { name, value } = event.target

 setUser({ ...user, [name]: value })
 }

  return (
<form
  onSubmit={event => {
    event.preventDefault()

    props.updateUser(user.id, user)
  }}
>
  <label>Product</label>
  <input type="text" name="product" value={user.product} onChange={handleInputChange} />
  <label>Color</label>
  <input type="text" name="color" value={user.color} onChange={handleInputChange} />
  <label>Price</label>
  <input type="text" name="price" value={user.price} onChange={handleInputChange} />
  <button>Update Table</button>
  <button onClick={() => props.setEditing(false)} className="button muted-button">
    Cancel
  </button>
</form>

） }

我该如何最好地进行下去，我尝试了许多方法，每种方法都不起作用，我不知道从哪里开始检查用户输入，哪个组件应该具有该功能。

Github链接

https://github.com/dampopgit/CRUDdictionaries

在ReactJS CRUD应用程序中找到重复条目的同时将用户输入值转换为所需结果

0 个答案: