数组形式的动态属性

Question

我想做这样的事。

  <form onSubmit={submitForm} className=''>        
  <div> 
  // this array is a dynamic set of fields inside the form           
     {items.map((input, i)=> (
       <div className="col-md-1 mb-4">
    <label htmlFor="inputResponse" className="form-label text-center" >
      <h5> Texto </h5>
    </label>              
  </div>
  <div className="row align-items-center row" key={i}>             
    <div className='col-10'>
      <input
        placeholder="desdeComponent"
        id={i}
        className='form-control mt-3'                    
        name={button value} // i would like the value of the button here.
        onChange= {handleChange((e) => e.target.name)}               
        type="text"
        required
      />
    </div>             
    ))
    }
  </div>
  
  <button className="btn btn-success me-4 mt-5"  type='submit'>AddSubmit</button>
</form>

我会有3个按钮‘添加文本’‘添加标题’添加链接‘的问题是，我想要动态地添加字段在我的形式，每次用户点击按钮。

我希望重用‘输入’，并像param一样将按钮值传递给name={按钮值}，然后提交包含所有字段的表单。

问题是，当我单击'Add‘时，名称值是text name='text’。当单击“Add”时，我在表单中创建一个新字段，但新字段的名称和旧字段的名称将更改为我单击的最后一个按钮的name值。

对于同一字段数组中的每个字段，是否有某种方法具有此属性？

const itemDataObject = {
    title_item_lateral: '' ,
    text_item_lateral: [],
    image_lateral: [
      {
        title_image_lateral: '',
        path_image_lateral: '',
      }
    ],
    document_lateral: [],
    links: [
      {
        title_link:'' ,
        link: ''
      }
    ]
  };

函数添加字段：

let buttonPressed;
const addFields = (e) => {
    buttonPressed = e.target.value;
    setNameValue(buttonPressed);
    let newItemField = {itemDataObject};
      setItems([...items, newItemField]);          
    }

我的一些想法是如何重用并将值发送到每个字段中的名称。谢谢

这是完整的代码：(按钮和类名来自Bootstrap 5)

import { useState } from "react";

const DemoLateral = () => {  
  
  const itemDataObject = {
    title_item_lateral: '' ,
    text_item_lateral: [],
    image_lateral: [
      {
        title_image_lateral: '',
        path_image_lateral: '',
      }
    ],
    document_lateral: [],
    links: [
      {
        title_link:'' ,
        link: ''
      }
    ]
  }; 
  
  let buttonPressed;
  const [nameValue, setNameValue] = useState(['inicial']);
  const addFields = (e) => {
    buttonPressed = e.target.value;
    setNameValue(buttonPressed);
    console.log(buttonPressed);      
    let newItemField;    
    newItemField = {itemDataObject};
    setItems([...items, newItemField]);    
  };
  
  const [items, setItems] = useState([]); 
  console.log(items);
  
  const handleChange = (name) => {
    console.log(name);
  };
  
  const submitForm = (e) => {
    e.preventDefault();   
  };
  
  return (
    <>      
      <h3 className="ms-5 mb-5"> AÑADIR ITEMS   </h3>
      <div className="container">
        <form onSubmit={submitForm} className=''>        
          <div> 
            {items.map((input, i, e)=> (
              <h2 key={i} name={e.target.value}> Hola {i}</h2>
            ))
            }
          </div>
          
          <button className="btn btn-success me-4 mt-5"  type='submit'>AddSubmit</button>
        </form>
        <div className="mt-5 text-center">          
          {/*  <button className="btn btn-primary me-4"  onClick={addTextItem}>Add Text</button> */}
          <button className="btn btn-primary me-4 mb-4" value='text' onClick={addFields}>Add Text</button>
          <button className="btn btn-primary me-4 mb-4" value='title' onClick={addFields}>Add Subtitle</button>
          <button className="btn btn-primary me-4 mb-4" value='image' onClick={addFields}>Add Image</button>
          <button className="btn btn-primary me-4 mb-4" value='document' onClick={addFields}>Add document</button>
          <button className="btn btn-primary me-4 mb-4" value='links' onClick={addFields}>Add Links</button>
          <button className="btn btn-primary me-4 mb-4" value='items' onClick={addFields}>Add Items</button>
        </div>
      </div>
    </>
  );
};

Answer 1

我发现的问题是，您使用的是如下所示，第三个参数'e‘是整个数组，而不是事件，因此e.target是未定义的。我在这里添加了对象的类型，newItemField = { ...itemDataObject, button_pressed: buttonPressed };

<div> 
   {items.map((input, i, e)=> ( 
      <h2 key={i} name={e.target.value}> Hola {i}</h2>
      ))
   }
</div>

也许这能给你一个开始：

import { useState } from 'react';

const DemoLateral = () => {
    const itemDataObject = {
        title_item_lateral: '',
        text_item_lateral: [],
        image_lateral: [
            {
                title_image_lateral: '',
                path_image_lateral: '',
            },
        ],
        document_lateral: [],
        links: [
            {
                title_link: '',
                link: '',
            },
        ],
    };

    let buttonPressed;

    const [nameValue, setNameValue] = useState(['inicial']);

    const addFields = (e) => {
        buttonPressed = e.target.value;
        setNameValue(buttonPressed);
        console.log('setNameValue: ', buttonPressed);
        let newItemField;
        newItemField = { ...itemDataObject, button_pressed: buttonPressed };
        setItems([...items, newItemField]);
        console.log('Items: ', items);
    };

    const [items, setItems] = useState([]);

    const handleChange = (name) => {
        console.log(name);
    };

    const submitForm = (e) => {
        e.preventDefault();
    };

    return (
        <>
            <h3 className="ms-5 mb-5"> AÑADIR ITEMS </h3>
            <div className="container">
                <div className="mt-5 text-center">
                    {/*  <button className="btn btn-primary me-4"  onClick={addTextItem}>Add Text</button> */}
                    <button className="btn btn-primary me-4 mb-4" value="text" onClick={addFields}>
                        Add Text
                    </button>
                    <button className="btn btn-primary me-4 mb-4" value="title" onClick={addFields}>
                        Add Subtitle
                    </button>
                    <button className="btn btn-primary me-4 mb-4" value="image" onClick={addFields}>
                        Add Image
                    </button>
                    <button className="btn btn-primary me-4 mb-4" value="document" onClick={addFields}>
                        Add document
                    </button>
                    <button className="btn btn-primary me-4 mb-4" value="links" onClick={addFields}>
                        Add Links
                    </button>
                    <button className="btn btn-primary me-4 mb-4" value="items" onClick={addFields}>
                        Add Items
                    </button>
                    <button className="btn btn-success me-4 mt-5" value="submit" onClick={addFields}>
                        AddSubmit
                    </button>
                </div>
                <form onSubmit={submitForm} className="">
                    <div>
                        {items.map((input, i) => (
                            <h3 key={i} name={input.button_pressed}>
                                {input.button_pressed} {i}
                            </h3>
                        ))}
                    </div>
                </form>
            </div>
        </>
    );
};

export default DemoLateral;