javascript - JSX 将对象传递给 React 中的 jsx 标记的值

Question

我正在尝试将对象传递给 react 中的 jsx 标记的值

• 我将标签选项的值设置为一个对象

• onChange 我得到了标签 <Form.Select> 中的值并用值设置本地状态

• 我控制台记录了本地状态，但它返回了 [object Object]

• 我用这种方式对它做了 JSON.stringify:

  console.log(JSON.strigify(obj))

  它返回:“[object Object]”

我做错了什么？

这是 react 组件的状态:

const [selectedOp, setSelectedOp] = useState()

这是控制台日志:

console.log(selectedOp)
console.log(JSON.stringify(selectedOp))

这是html代码:

<Form.Select onChange={e => setSelectedOp(e.target.value)} className='b' style={{ display: 
    'inline-block' }} size="lg" aria-label="Default select example">
     <option>Click to choose message</option>
     {mainNotifications.map((n, i) =>
     <option key={i} name="selectMessage" value={{message:n.message,type:n.type}}>hey this is an option tag </option>
     )}
</Form.Select>

Answer 1

你的值是一个字符串类型，而不是一个对象，否则它会打印为 [object, object] 所以你需要将你的对象值字符串化

value=JSON.stringify({message:n.message,type:n.type})

检查下面的例子

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [val, setVal] = useState();

  const changeHandler =value => {
    console.log(value);
    setVal(value);
  
  };

  return (
    <div>
      <select onChange={e => changeHandler(e.target.value)}>
        <option value={JSON.stringify({value: 'one', type: 'number' })} >none</option>
        <option value={JSON.stringify({value: 'one', type: 'number' })}>one</option>
      </select>
      {val&&console.log(JSON.parse(val))}
    </div>
  );
}