反应js类民意测验转换成反应钩子民意测验 [英] react js class poll convert into react hooks poll

问题描述

这是我的react组件"class"的代码.基本民意调查，但我想将此表格转换为react挂钩，所以需要帮助...！我不知道该怎么办...！请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助请帮助

this my code for react component "class" base poll but I want to convert this form into react hooks so need help...!I don't understand How can I do this...!please help please help please help please help please help please help please help please help please help please help please help please help please help please help please help please help please help please help

import React, { Component } from "react";
import Poll from "react-polls";

// Declaring poll question and answers
const pollQuestion = "Youtube is the best place to learn ?";
const pollAnswers = [
  { option: "Yes", votes: 7 },
  { option: "No", votes: 2 },
  { option: "don't know", votes: 1 },
];

class Fakepolls extends Component {
  // Setting answers to state to reload the component with each vote
  state = {
    pollAnswers: [...pollAnswers],
  };

  // Handling user vote
  // Increments the votes count of answer when the user votes
  handleVote = (voteAnswer) => {
    const { pollAnswers } = this.state;
    const newPollAnswers = pollAnswers.map((answer) => {
      if (answer.option === voteAnswer) answer.votes++;
      return answer;
    });
    this.setState({
      pollAnswers: newPollAnswers,
    });
  };

  render() {
    const { pollAnswers } = this.state;
    return (
      <div>
        <Poll
          question={pollQuestion}
          answers={pollAnswers}
          onVote={this.handleVote}
        />
      </div>
    );
  }
}
export default Fakepolls;

推荐答案

对于这个答案，我想假设您是在询问如何将基于类的组件转换为功能组件，因为实际上并没有什么要解决的.转换为自定义的React钩子.

I will, for this answer, assume you are rather asking about how to convert a class-based component to a functional component since there isn't anything really to convert to a custom react hook.

转换步骤:

1. 将状态转换为使用 useState React钩子.
2. 将 this.state.pollAnswers 的引用替换为 pollAnswers .
3. 将对 this.setState 的引用替换为 setPollAnswers .
4. 使用适当的功能状态更新来 不 更改现有状态.
5. 将 this.handleVote 的引用替换为 handleVote ，并声明 const .

1. Convert state to use the useState React hook.
2. Replace references of this.state.pollAnswers to pollAnswers.
3. Replace references to this.setState to setPollAnswers.
4. Use proper functional state update to not mutate existing state.
5. Replace reference of this.handleVote to handleVote and declare const.

代码

import React, { useState } from "react";
import Poll from "react-polls";

// Declaring poll question and answers
const pollQuestion = "Youtube is the best place to learn ?";
const answers = [ // <-- renamed to avoid collision with state variable
  { option: "Yes", votes: 7 },
  { option: "No", votes: 2 },
  { option: "don't know", votes: 1 }
];

const Fakepolls = () => {
  // Setting answers to state to reload the component with each vote
  const [pollAnswers, setPollAnswers] = useState([...answers]);

  // Handling user vote
  // Increments the votes count of answer when the user votes
  const handleVote = (voteAnswer) => {
    setPollAnswers((pollAnswers) =>
      pollAnswers.map((answer) =>
        answer.option === voteAnswer
          ? {
              ...answer,
              votes: answer.votes + 1
            }
          : answer
      )
    );
  };

  return (
    <div>
      <Poll
        question={pollQuestion}
        answers={pollAnswers}
        onVote={handleVote}
      />
    </div>
  );
};
export default Fakepolls;

这篇关于反应js类民意测验转换成反应钩子民意测验的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！