Вопрос:

Тип ввода = "файл", показывающий странное поведение при использовании вместе с другим типом ввода

javascript reactjs debugging input-type-file

24 просмотра

1 ответ

13 Репутация автора

У меня есть вход type="file"и input type="text". Когда я сначала выбираю файл, а затем помещаю текст в поле ввода и нажимаю кнопку «Добавить», изображение не отображается, но когда я сначала помещаю текст, а затем выбираю изображение (файл), оно ведет себя нормально. Я думаю, что некоторые проблема во входном ключе, который я дал. Вот ссылка, откуда я нашел этот метод http://robhoffmann.me/2016/03/12/Clearing-a-file-input-in-React/

Что я пытаюсь сделать: я хочу иметь возможность выбрать изображение и ввести название продукта, которое будет отображаться на экране. Как только я нажму кнопку Добавить. Я хочу, чтобы оба входа, то есть тип файла и тип текста, были сброшены, чтобы я мог добавить изображение и название следующего продукта и так далее.

function Admin(props){

    const [productName, setproductName] = React.useState("");

    let [productPicture, setproductPicture] = React.useState({file:null,inputKey:Date.now()});


    return (
        <div>
            <Link to="/">Go back</Link><br/><br/>
            <input type="file" onChange={(e)=>(productPicture=URL.createObjectURL(e.target.files[0]))} key={productPicture.inputKey}></input><br/>
            <input type="text" required placeholder="Product Name" onChange={(e)=>setproductName(e.target.value)} value={productName}></input><br/><br/>

<button type="Submit" onClick={(e)=>{props.AddInfo({productName,productPicture});setproductName("");setproductPicture({file:null,inputKey:Date.now()})}}>Add</button>
            <br/><br/>

            <div>
             {props.products.map((x)=>(<div>{x.name} {typeof x.picture === 'string' ? <img src={x.picture} alt="Product Picture" style={{width:"250px"}}></img>:""} </div>))}   
            </div>
        </div>
    )
}

export default Admin;

Я ожидаю, что выходные данные покажут productName и productPicture, когда я нажимаю кнопку «Добавить», но это происходит только тогда, когда я сначала набираю текст, а затем выбираю изображение / файл, а НЕ, когда делаю наоборот.

Автор: Hardik Aswal Источник Размещён: 11.08.2019 06:12

Ответы (1)


0 плюса

6285 Репутация автора

Делая это,

<input type="file" onChange={(e)=>(productPicture=URL.createObjectURL(e.target.files[0]))} key={productPicture.inputKey}></input><br/>

Вы прямо пытаетесь изменить состояние, productPicture=URL.createObjectURL(e.target.files[0])что неправильно. Здесь вы не устанавливаете состояние. Чтобы установить текущее состояние, вам нужно использовать setproductPicture setterфункцию.

<input type="file" onChange={setImage} key={productPicture.inputKey} />

И setImageфункция должна быть,

const setImage = (e) => {
  console.log(e.target.files[0].name);
  let file = e.target.files[0];  //Capture the file in variable otherwise event gets nullified and you won't get file.
  setproductPicture(prevState=>({
     ...prevState,
     file: URL.createObjectURL(file)
  }))
}

демонстрация

Примечание: input это пустой тег, не закрывайте его как <input></input>. Вы можете просто сделать это <input />.

Автор: ravibagul91 Размещён: 11.08.2019 07:07
Вопросы из категории :
32x32