react框架 上面那个值怎么赋值给下面的

react+Ant Design框架 上面那个值怎么赋值给下面的

img

img

试试下面的


import {useState} from 'react';
//注意要去掉原来代码里面secondaryList的申明，改成下面这样
const [secondaryList, setSecondaryList] = useState([]) 

const onSlotTypeChnage=(e:any)=>{
setSecondaryList(TRADE_LIST[e].secondary);///

form.setFieldsVlaue.......//原来的代码
}

Select联动，参考下面示例

【以下回答由 GPT 生成】

根据问题描述，我理解的上面的值是指<p>标签中包裹的文字内容，下面的值是指表单中的Form.Item组件的初始值。

解决方案如下：

  1. 首先，使用React的useState钩子函数来定义一个状态变量，用于保存上面的值。
import React, { useState } from 'react';

const App = () => {
  const [textValue, setTextValue] = useState('');

  return (
    <>
      <p>{textValue}</p>
      {/* 下面的代码省略 */}
    </>
  );
};

export default App;
  1. 然后，将上面的值赋值给下面的值，可以通过React的onChange事件来监听<p>标签中文字的变化，并将变化的值赋给表单的初始值。
import React, { useState } from 'react';
import { Form, Select } from 'antd';

const App = () => {
  const [textValue, setTextValue] = useState('');

  const handleTextChange = (event) => {
    const newValue = event.target.innerText;
    setTextValue(newValue);
    form.setFieldsValue({ secondary: newValue });
  };

  return (
    <>
      <p contentEditable onInput={handleTextChange}>{textValue}</p>

      <Form>
        {/* 其他表单代码省略 */}
        <Form.Item
          className="form-detail-item"
          label="二级行业"
          rules={{ required: true, message: '请选择二级行业' }}
        >
          <Select
            onChange={(value) => form.setFieldsValue({ secondary: value })}
          >
            {/* 下拉选项代码省略 */}
          </Select>
        </Form.Item>
      </Form>
    </>
  );
};

export default App;

这样，当上面的值发生变化时，会自动将新值赋给下面的值。

注意：为了能够编辑<p>标签的内容，我在代码中给它添加了contentEditable属性，并监听onInput事件来获取最新的值。另外，记得要将setTextValue和form相关的代码完善和补充。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^