Преобразовать ввод URL в изображение - PullRequest
Новая
       6

Преобразовать ввод URL в изображение

1 голос
/ 27 мая 2020

Это приложение React принимает текстовые вводы (AddMov ie. js) и отображает их на другой странице (MovieList. js).

Первый ввод: Mov ie имя и два ввода : Price

Получение строк для отображения было довольно простым делом, но теперь я хочу взять URL-адрес изображения в третьем вводе текста и отобразить изображение вместе с именем и ценой.

I Я новичок в React, и я не совсем уверен, что изменить. Любая помощь будет принята с благодарностью.

Код для AddMov ie. Я не уверен, что все нужно обрабатывать с помощью updateImage ()? 

const AddMovie = () => {
  const [name, setName] = useState('');
  const [price, setPrice] = useState('');
  const [image, setImage] = useState('');

  const [movies, setMovies] = useContext(MovieContext);

  const updateName = (e) => {
    setName(e.target.value);
  };

  const updatePrice = (e) => {
    setPrice(e.target.value);
  };

  const updateImage = (e) => {
    setImage(e.target.value);
  };

  const addMovie = (e) => {
    e.preventDefault();
    setMovies((prevMovies) => [
      ...prevMovies,
      { name: name, price: price, image: image },
    ]);
  };

  return (
    <form onSubmit={addMovie}>
      Enter Product Title
      <br />
      <input type='text' name={name} onChange={updateName} />
      <br />
      Enter Product Price
      <br />
      <input type='text' price={price} onChange={updatePrice} />
      <br />
      Enter Image Address
      <br />
      <input id='image' type='text' image={image} onChange={updateImage} />
      <br />
      <br />
      <button>Submit</button>
    </form>
  );
};

Каждый отдельный элемент Mov ie. Не уверен, что {изображение} верное. 

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <image>{image}</image>
    </div>
  );
};

export default Movie;

Это для списка фильмов, отображаемых после их добавления. 

const MovieList = () => {

  const [movie, setMovie] = useContext(MovieContext);

  return (
    <div>
      {movie.map((movie) => (
        <Movie name={movie.name} price={movie.price} image={movie.image} />
      ))}
    </div>
  );
};

export default MovieList;

Ответы [ 3 ]

1 голос
/ 27 мая 2020
Изображение

не является собственным элементом html, поэтому вам следует изменить компонент Mov ie на 


const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <img src={image} />
    </div>
  );
};

export default Movie;
0 голосов
/ 27 мая 2020

Ниже должно работать для вас. В качестве предложения я предлагаю вам переименовать image в imageUrl. 

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <img src={image} alt={name} />
    </div>
  );
};
0 голосов
/ 27 мая 2020

Предполагается, что movie.image содержит URL 

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <img src={image} alt={name}>
    </div>
  );
};

export default Movie;

Это должно выполнить работу;)

...