Question

我是新手做出反应。我正在显示10个问题，每个问题有3个答案。我无法捕获他们为每个问题选择的答案并将值存储为数组。这是我的代码。我不确定，但我想我需要一个句柄更改和句柄提交并将它们绑定到答案。

import React, { Component } from 'react';
import {
   BrowserRouter as Router,
   Route,
   Link,
   Redirect,
   withRouter
   } from 'react-router-dom';
import axios from 'axios';
import AnswerOption from "./answersContent";
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';



const styles = {
    display: 'flex',
    justifyContent: "center"
  };
const style = {
    margin: 15,
};

const Content = {
    padding: 10,
    margin: 10,
    backgroundColor: "",
    color: "",
    display: "inline-block",
    fontFamily: "monospace",
    fontSize: "18",
   };

 const answ ={
    listStyle: 'none'
};

 class Questions extends Component {
     constructor(props) {
         super(props);
        this.state = {
            redirect: "",
             user: "",
             questions: [],
             answers: []
        }
     }




    componentDidMount() {
         console.log(this.props.user);
        axios.post('/questions')
            .then((response) => {
                console.log(response);
                if (response.status === 200) {
                    console.log("successfull");
                    // self.setState({ user: response.data.user.id});
                    this.setState({user: this.props.user});
                        this.setState({redirect: false});
                   this.setState ({ questions : 
response.data.surveyQuestions})

                    }
           })
            .catch(function (error) {
                console.log(error);
            });
    }
    handleClick(event){
        const payload={
            "answers": this.state.answers
        };
        console.log(payload)
    }

    render(){
        const { redirect } = this.state;

        if (redirect) {
            return <Redirect to='/login'/>;
        }


        return (

             <div className="dashboard" style={styles}>
                < MuiThemeProvider>

                <div style={Content}>

                    <h1>Welcome to The Well-Stocked Stork!</h1>
                    <br />

                    {this.state.questions.map((quest) => (
                        <p> {quest.id}. {quest.question}
                        <ul style={answ}>

                            <li> <input type="radio" name=
{quest.surveyAnswers[0].body} value={quest.surveyAnswers[0].value}   
onChange = {(event,value) => this.setState({answers: 
quest.surveyAnswers[0].value})}  />{quest.surveyAnswers[0].body}</li>
                            <li> <input type="radio" name=
{quest.surveyAnswers[1].body} value={quest.surveyAnswers[1].value}  
onChange = {(event,value) => this.setState({answers: 
quest.surveyAnswers[1].value})} />{quest.surveyAnswers[1].body}</li>
                            <li> <input type="radio" name=
{quest.surveyAnswers[2].body} value={quest.surveyAnswers[2].value}  
onChange = {(event,value) => this.setState({answers: 
quest.surveyAnswers[2].value})}  />{quest.surveyAnswers[2].body}</li>

                        </ul>

                        </p>
 ))}
                <RaisedButton label="Submit" primary={true} style=
{style} onClick={(event) => this.handleClick(event)}/>

              </div>
            </MuiThemeProvider>

           </div>
       )
    }
 }

   export default Questions;

Answer 1

你处理变革是对的，但你错过了一件事。您应该在构造函数中绑定handleClick方法。像this.handleClick = this.handleClick.bind(this)之类的东西，否则你会收到错误..state is not defined...

保存反应中单选按钮的值

1 个答案: