reactjs 在onClick上添加输入并通过React表单上传图像

ss2ws0br  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(118)

如何让用户添加更多的输入字段?
然后如何以编程方式将值存储到嵌套在对象状态上的数组中?
该ideia是让用户添加输入(类型=文件)添加更多的地方。每个地方必须只有两张照片和它的地址。每次用户点击添加一个新的地方,两个输入和一个输入的地址必须显示。

export interface Data {
    client: string;
    data: string;
    photos: Place[];
}

export interface Place{
    photo_1: string;
    photo_2: string;
    address: string;
}
const [data, setData] = useState<Data>({
        client: "",
        date: Date.now(),
        photos: [],
});

function handleChange(e) {
        /* if (name === "photo_1") {
            return setData((prev) => ({
                ...prev,
                photos: [...prev.photos, { photo_1: value, photo_2: value, address: "" }],
            }));
        } */

        setData((prev) => ({
            ...prev,
            [name]: value,
        }));
}

function Form() {
       return (
          <form onSubmit={handleSubmit}>
                <div className="inputs">
                    <div>
                        <label htmlFor="client">Client</label>
                        <input
                            id="client"
                            type="text"
                            name="client"
                            onChange={handleChange}
                        />
                    </div>
                    <div>
                        <label htmlFor="date">Date</label>
                        <input
                            id="date"
                            type="date"
                            name="date"
                            onChange={handleChange}
                        />
                    </div>
                    <div>
                        <label>Place</label>
                            <div key={index}>
                                <input
                                    type="file"
                                    name="photo_1"
                                    onChange={handleChange}
                                />
                                <input
                                    type="file"
                                    name="photo_2"
                                    onChange={handleChange}
                                />
                                <label htmlFor="address">Local address</label>
                                <input type="text" name="address" />
                            </div>
                        <button> // must add a copy of that div above
                            Add place
                        </button>
                    </div>
                </div>
                <button>Submit</button>
        </form>
      )
}
vbopmzt1

vbopmzt11#

您需要在react中创建动态输入字段,然后将文件推入其状态。
例如:
1.创造动态场-
const addMoreField =(e,index)=〉{ let newData ={ otherData:'',file:null } setOurState([...ourState,newData])}
1.创建一个数组,其状态为-
const initialState = { otherData:'';file:null } const [ourState,setOurState] = useState([initialState])
试试这个代码,让我知道它是否工作,如果你仍然面临着一个问题,只是让我知道。我会帮助你。

相关问题