将 URL 输入转换为图像

Question

此 React 应用接受文本输入 (AddMovie.js) 并将它们显示在另一个页面上 (MovieList.js)。

输入一：电影名称 & 输入二：价格

显示字符串非常简单，但现在我想在第三个文本输入中输入图像 URL 并显示图像以及名称和价格。

我是 React 的新手，我不太确定在哪里修改。任何帮助将不胜感激。

AddMovie 的代码。我不确定是否所有的事情都需要在 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>
  );
};

每个单独的电影项目。不确定{image}是否正确。

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;

Answer 1

image 不是原生 html 元素，因此您应该将 Movie 组件修改为


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

export default Movie;

Answer 2

假设 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;

必须完成这项工作 ;)

Answer 3

以下应该适合您。作为建议，我建议您将 image 重命名为 imageUrl.

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

将 URL 输入转换为图像

Convert URL Input to Image

javascript

reactjs

react-props

react-hooks