时间戳

首页 > 解决方案 > 如何获取单选按钮值并将其上传到 Firebase？

reactjs - 如何获取单选按钮值并将其上传到 Firebase？

问题描述

在这段代码中，我想上传单选按钮值并将其存储在 firebase 数据库中。我想用最简单的方法来解决这个问题。我看到其他代码将使用构造函数，但我不知道是否可以使用更简单的方法来解决它。我怎样才能做到这一点 ？

import React, { useState } from "react";
import ReactPlayer from "react-player";
import Array from "../Array";

import firebase from "firebase";

export default () => {
  const [selected, setSelected] = useState("");

  return (
    <div>
      <div className="video">
        <ReactPlayer url={Array[0]} playing />
      </div>
      <label>Guess whether this video is fake or real ?</label> <br />
      <label>
        <input
          type="radio"
          name="answer"
          value="real"
          onChange={e => setSelected(e.target.value)}
        />
        real
      </label>
      <label>
        <input
          type="radio"
          name="answer"
          value="fake"
          onChange={e => setSelected(e.target.value)}
        />
        fake
      </label>
    </div>
  );
};

标签： reactjsfirebase

解决方案

我会这样做：

import React from "react";
....
export default () => {
const [state, setState] = React.useState({});

const handleInputChange = e => {
    const { name, value } = e.target;
    console.log(name, value);
    setState(state => {
        const newState = { ...state, [name]: value }

        //post newState to firebase

       return newState
    });

};

return (
    <div>
        <div className="video">
            <ReactPlayer url={Array[0]} playing />
        </div>
        <div>{JSON.stringify(state)}</div>
        <label>Guess whether this video is fake or real ?</label> <br />
        <label>
            <input
                type="radio"
                name="answer1"
                value="real"
                onChange={handleInputChange}
            />
            real
        </label>
        <label>
            <input
                type="radio"
                name="answer2"
                value="fake"
                onChange={handleInputChange}
            />
            fake
        </label>
    </div>
);

};

推荐阅读