Question

此React应用程序接受文本输入（AddMovie.js），并将它们显示在另一个页面（MovieList.js）。

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

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

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

AddMovie的代码。我不确定是否需要在updateImage（）下处理所有内容？

var result = accessLogEntry.replace(/(?<=auth\s-\s).*(?=(?:Firefox|Chrome)\/[\d\.]+)/g, "");

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

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>
  );
};

这是添加电影后显示的电影列表。

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

export default Movie;

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输入转换为图像

3 个答案: