Question

我正在尝试让用户向视频链接提供输入，这将更新状态值，然后将其用作视频的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>
            )
        }
    }

Answer 1

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

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

您不需要表单和提交事件。

如果要在Go之后显示视频！单击按钮，您可以使用另一个这样的标志；

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

并使用像这样的onSubmit事件；

<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>

并在渲染方法中显示视频标签时检查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"

使用反应状态更新视频src-有可能吗？

1 个答案: