Question

我要做什么：我正在构建React表单，可以在其中添加带有标题，描述和带有图像（url）的对象库的“项目”，并向每个对象添加Alternete文本一。然后在另一个组件中提取该信息并显示在页面上。

我能做什么：我可以将图像上传到Firebase存储并提交ProjectName，Description和链接到数据库，但是添加多个图像时遇到问题数据库中包含替代文本。

我遇到的问题：我在处理更改输入图像和标题并将其添加到状态时遇到问题。

    render() {
    console.log(this.state.images)
    const inputImage = this.state.images.map((index) => (
        <div className="form-row" key={index}>
            <div className="form-label">
                <label htmlFor="imgTitle">Tytuł obrazka</label>
            </div>
            <div className="form-field">
                <input type="text" id="imgTitle" name="imgTitle" value={imgTitle} onChange={(e) => this.handleChangeImage(e, index)} placeholder="Opis obrazka" />
            </div>
            <div className="form-label"><label htmlFor="image">Zdjęcia</label></div>
            <div className="form-field">
                <input type="file" name="image" id="image" accept="image/*" onChange={(e) => this.handleChangeImage(e, index)} />
            </div>
        </div>
    ))
    return (
        <div className="container" >
            <form className="form-container" onSubmit={this.handleSubmit}>
                <div className="form-row">
                    <div className="form-label">
                        <label htmlFor="title">Tytuł projektu</label>
                    </div>
                    <div className="form-field">
                        <input type="text" id="title" name="title" value={this.state.username} onChange={this.handleChange} placeholder="Tytuł projektu" />
                    </div>

                </div>
                <div className="form-row">
                    <div className="form-label"><label htmlFor="descriptiom">Opis</label></div>
                    <div className="form-field">
                        <textarea name="description" id="description" cols="30" rows="10" onChange={this.handleChange} placeholder="Opis projektu"></textarea>
                    </div>
                </div>
                {inputImage}
                <button onClick={() => this.handleAddInputImage()}>Dodaj zdjęcie</button>
                <button>Dodaj</button>
            </form>
        </div>

使用Firebase做出反应：添加带有备用文本的“图片库”（alt）

0 个答案: