Javascript 使用react状态更新视频src-可能吗？

我正在尝试让用户向视频链接提供输入，该链接将更新状态值，然后我将其用作视频的src

如果我将初始状态设置为视频链接，那么它可以工作，但一旦它与输入值一起提交，我就没有运气了。 我可以看到正在传递的值，并且可以显示它

我错过什么了吗？这是我的密码

class Video extends Component {
    constructor(props) {
        super(props)

        this.textInput = React.createRef();
        this.state = {
            value: ''
        }
    }

        handleSubmit = e => {
            e.preventDefault();
            this.setState({ value: this.textInput.current.value })
        };

        render() {
            console.log(this.state)
            return (
                <React.Fragment>
                    <div className="add-video">
                        <h3>Add Your Own</h3>
                        <form onSubmit={this.handleSubmit}>
                            <input
                                type='text'
                                ref={this.textInput}>
                            </input>
                            <button type="submit" value="submit">Go!</button>
                        </form>
                    </div>
                    <p>Your video: {this.state.value}</p>
                    <div className="video-wrapper">

                        <video
                            maxwidth="800"
                            width="100%"
                            height="450"
                            playsInline
                            autoPlay
                            muted
                            loop
                        >
                            <source
                                src={this.state.value}
                                type="video/webm"
                            />
                        </video>

                    </div>
                </React.Fragment>
            )
        }
    }

class视频扩展组件{
建造师（道具）{
超级（道具）
this.textInput=React.createRef（）；
此.state={
值：“”
}
}
handleSubmit=e=>{
e、 预防默认值（）；
this.setState（{value:this.textInput.current.value}）
};
render（）{
console.log（this.state）
返回(
加上你自己的
走！
您的视频：{this.state.value}

)
}
}

首先，您应该使用输入元素的onChange事件，如下所示

<input type="text" value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />

并使用像这样的提交事件

this.state = {
  value: '',
  showVideo: false
};

<form onSubmit={(e) => {e.preventDefault(); this.setState({showVideo: true})}}>
  <input type="text" value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />
  <button type="submit" value="submit">Go!</button>
</form>

{e.preventDefault（）；this.setState（{showVideo:true}}}>
this.setState（{value:e.target.value}）}/>
走！

并在渲染方法中显示视频标记时选中showVideo标志

this.state.showVideo ? 
                        <video
                            maxwidth="800"
                            width="100%"
                            height="450"
                            playsInline
                            autoPlay
                            muted
                            loop
                        >
                            <source
                                src={this.state.value}
                                type="video/webm"
                            />
                        </video>
    : "no video"

this.state.showVideo？
：“没有视频”

um你能分享一下你目前得到的结果吗仅仅出于好奇，有没有可能在提交表单时传递道具？提交表单是什么意思？