将变量函数传递给 React.js 中的组件

Question

我尝试在 react-js 中上传视频并预览但我失败了，如何将 fi 变量传递给 url 将我的代码分成

import {useState} from 'react';
import ReactPlayer from 'react-player';

function Video(props) {

    const [file,setFile] = useState( null );

    const onInputValue = (e) => {
      var fi =   URL.createObjectURL(e.target.files[0])
      console.log(fi);
    };

    return (
        <div>
            <form method="post" action="#" id="#">
                <input type="file" onChange={onInputValue}/>
                <button>Upload</button>
            </form>

            <ReactPlayer
            controls
            url={fi} 
            id="videoz" />
        </div>
    );
}

export default Video;

我这样做但是在 fi 变量 error

中显示错误

src\components\Video.js
  Line 22:18:  'fi' is not defined  no-undef

如何解决这个问题，我是react新手！

Answer 1

我建议你将你的 fi 保存在一个状态中，这样你就可以将它传递给你的 ReactPlayer，然后需要验证它是否不为 null。

import { useState } from 'react';
import ReactPlayer from 'react-player';

function Video(props) {
  const [file, setFile] = useState(null);
  const [fi, setFi] = useState(null);

  const onInputValue = (e) => {
    setFi(URL.createObjectURL(e.target.files[0]));
    console.log(fi);
  };

  return (
    <div>
      <form method="post" action="#" id="#">
        <input type="file" onChange={onInputValue} />
        <button>Upload</button>
      </form>

      <ReactPlayer controls url={fi} id="videoz" />
    </div>
  );
}

export default Video;

Answer 2

你var fi，作用域为函数。它在 onInputValue 之外是不可见的。因此错误。

您要使用的变量在更改时应该会导致重新呈现。状态是合乎逻辑的解决方案。您可以将状态变量与将被更新的 useState 一起使用。

function Video(props) {

    const [file,setFile] = useState( null );
    const [fi,setFi] = useState('');

    const onInputValue = (e) => {
      var newFi =   URL.createObjectURL(e.target.files[0])
console.log(newFi); 
setFi(newFi);    
    };

    return (
        <div>
            <form method="post" action="#" id="#">
                <input type="file" onChange={onInputValue}/>
                <button>Upload</button>
            </form>

            <ReactPlayer
            controls
            url={fi} 
            id="videoz" />
        </div>
    );
}

将变量函数传递给 React.js 中的组件

Pass a variable function to component in React.js

javascript

reactjs

arrow-functions