Question

我正在为我的项目进行POC。我正在使用React作为前端。我对reactjs很陌生。我有一个小的查询，有人可以帮我吗。

我正在从服务器获取json数据，数据如下：

{
   [id: 1,
   name: Test data,
   option:{ "numeric", "alpha-numeric", "special characters", "language change" ] ....}
}

我需要在页面上将选项显示为单选按钮，以便用户可以选择并转到下一页。在下一页中，我将获得另一组用于选项的数据，这些数据需要显示为单选按钮。我应该如何在reactjs中构建此通用单选按钮组件，以便可以在应用程序的所有页面中使用。

我已经尝试过此代码。但是它将单选按钮打印在一行上。循环无效

import React, { Component } from "react";
import { PageHeader, ListGroup } from "react-bootstrap";

import "./Home.css";

const url = "http://localhost:xxxx/rest/qas/2";

export default class Question3 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      selectedOption: false,
      QuestionAnswer: [],
      counter: 0,
      names: ""
    };
  }

  componentDidMount() {
    fetch(url)
      .then(response => {
        console.log(response);

        return response.json();
      })
      .then(json => {
        this.setState({
          qid: json.qid,
          qtext: json.qtext,
          point: json.marks,
          ans: json.answer,
          choices: JSON.stringify(json.options)
        });
      });
  }

  // Note: it's important to handle errors here
  // instead of a catch() block so that we don't swallow
  // exceptions from actual bugs in components.

  handleNext = e => {
    e.preventDefault();
    this.props.history.push("/question4");
  };

  handlePrevious = e => {
    e.preventDefault();
    this.props.history.push("/question2");
  };

  handleOptionChange = e => {
    if (e.target.checked) {
      console.log(e.target.value);
      if (e.target.value === this.state.answer) this.props.counter += 1;
    }
  };

  render() {
    const { qid, qtext, point, ans } = this.state;

    const data = {
      option: [this.state.choices]
    };

    let radioButtons = [];

    const RadioButtons = props => {
      const { names } = props;

      return (
        <div>
          {" "}
          {names.map(n => (
            <Radio name={n} />
          ))}{" "}
        </div>
      );
    };

    const Radio = props => {
      const { name } = props;
      return (
        <div>
          <input id={name} type="radio" name="type" value={name} />{" "}
          <label for={name}> {name} </label>{" "}
        </div>
      );
    };

    //const listItems = replies.map((number) =>
    //  {number}
    //);

    return (
      <div className="q2">
        <div className="labels">
          <label for="test">
            {" "}
            {this.state.qid} {this.state.qtext}{" "}
          </label>{" "}
        </div>
        <div className="App">
          <RadioButtons names={data.option} />{" "}
        </div>
        <div className="Navigation">
          <button
            type="submit"
            className="btn btn-primary"
            onClick={this.handleNext}
          >
            Next{" "}
          </button>
          &nbsp;&nbsp;&nbsp;{" "}
          <button
            type="submit"
            className="btn btn-primary"
            onClick={this.handlePrevious}
          >
            Previous{" "}
          </button>{" "}
        </div>{" "}
      </div>
    );
  }
}

Answer 1

相当笼统的问题，但我将尽我所能尽可能地回答，而不仅仅是给您完整的代码。

从服务器获取的数据将用于生成RadioButton，因此您需要将其存储在state / redux / localstorage中，或者选择将其存储在其中。一旦关闭，您将需要创建一个组件，然后可以通过该应用程序将其重用。组件中有很多示例，因此我不再赘述。然后，在您的组件中，您将需要访问从API存储的数据。对于此示例，我假设您将数据存储在const中，并将其作为prop传递给组件：<RadioButtons names={data.options} />

在RadioButtons组件中，您可以将prop应用于组件循环的渲染中以渲染按钮：

render() {
    let radioButtons = [];
    this.props.names.map(name => radioButtons.push(<input type="radio" value={name}> {name} <br>));
    return <div>{radioButtons}</div>;
}

希望这会有所帮助！

Answer 2

这是您可以做什么的一个最小示例。

RadioButtons是一个以names作为道具的组件，然后在其上进行映射以返回Radio组件的列表。 Radio组件负责使用name道具并渲染带有标签的单个单选按钮。另外，如果只想选择一个，请记住保持单选按钮的type不变。

import React from "react";
import ReactDOM from "react-dom";

const data = {
  name: "Test data",
  option: ["numeric", "alpha-numeric", "special characters", "language change"]
};

const RadioButtons = props => {
  const { names } = props;
  return (
    <div>
      {names.map(n => (
        <Radio name={n} />
      ))}
    </div>
  );
};

const Radio = props => {
  const { name } = props;
  return (
    <div>
      <input id={name} type="radio" name="type" value={name} />
      <label for={name}>{name}</label>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <RadioButtons names={data.option} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望这会有所帮助。编码愉快！

在ReactJS中，单选按钮呈现

2 个答案: