Updating state for array ReactJS?

时间:2018-07-16 15:26:01

标签: javascript reactjs

Ok so here's my code:

var uuid = require("uuid-v4");
// Generate a new UUID
var myUUID = uuid();
// Validate a UUID as proper V4 format
uuid.isUUID(myUUID); // true

var questionNum = 0;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: uuid(),
      title: "",
      author: "",
      questions: [],
      answers: []
    };

    this.handleChange = this.handleChange.bind(this);
    this.addQuestion = this.addQuestion.bind(this);
    this.removeItem = this.removeItem.bind(this)
  }

  componentDidMount() {
    // componentDidMount() is a React lifecycle method
    this.addQuestion();
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  removeItem (index) {
    questionNum--;
    this.setState(({ questions }) => {
      const mQuestions = [ ...questions ]
      mQuestions.splice(index, 1)
      return { questions: mQuestions }
    })
    this.setState(({ answers }) => {
      const mAnswers = [ ...answers]
      mAnswers.splice(index, 4)
      return { answers: mAnswers}
    })
    console.log(
      "answers",
      this.state.answers,
      "questions",
      this.state.questions,
      questionNum,
      this.state.title,
      this.state.author
    );
  }

  addQuestion() {
    questionNum++;
    this.setState(previousState => {
      const questions = [
                          ...previousState.questions,
                          <input 
                            type="text"
                            value={this.state.questions}
                            onChange={this.handleChange}
                            name="question"
                            key={uuid()}
                          />
                        ];
      const answers = [
                        ...previousState.answers,
                      ];

      for (var i = 0; i < 4; i++) {
        answers.push(
          <input 
            type="text"
            onChange={this.handleChange}
            name={uuid()}
          />
        );
      }
      return { questions, answers };
    });
    console.log(
      "answers",
      this.state.answers,
      "questions",
      this.state.questions,
      questionNum,
      this.state.title,
      this.state.author
    );
  }

  render() {
    return (
      <div className="App">
        <div>
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Quiz Form 3.0</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>

        <div  className="formDiv">
          <form>
            <div className="Intro">
              Give your Quiz a title:{" "}
              <input
                type="text"
                value={this.state.title}
                onChange={this.handleChange}
                name="title"
              />
              <br />
              Who's the Author?{" "}
              <input
                type="text"
                value={this.state.author}
                onChange={this.handleChange}
                name="author"
              />
              <br />
              <br />
            </div>
            <div className="questions">
            <div className="questions">
              Now let's add some questions... <br />
              <ol>
              {this.state.questions.map((question, index) => {
                return (
                  <li>
                  <div key={uuid()}>
                    Question
                    {question}<br />
                    <button onClick={ () => this.removeItem(index) }>
                  Remove Question
                </button>
                    Answer Choices<br />
                    {Array.from({ length: 4 }, () => (
                      <div>
                        <input type="checkbox" />
                        <input type="text" onChange={this.handleChange} />
                      </div>
                    ))}
                  </div>
                  </li>
                );
              })}
              </ol>

            </div>
              {
              // This is what it would look like for the structure
              // I proposed earlier.
              // this.state.questions.map((question) {
              //   return (
              //       <div>{question.quesion}</div>
              //       {
              //           question.answers.map((answer) => {
              //               return (<div>{answer}</div>);
              //           })
              //       }
              //   );
              // })
              // This would output all questions and answers.
              }
            </div>
          </form>
          <button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
        </div>
      </div>
    );
  }
}

export default App;

I am having trouble with updating my state for my answers and questions states/props. I don't quite understand what'g happening with them to be honest. The addQuestion function is called when the Add Question button is pressed and that adds 4 objects (each answer choice, 4 to 1 question) and one question. When the removeQuestion function is called (when Remove Question button is pressed) that question, along with its answer choices is removed from their corresponding arrays. I notice that it doesn't matter which answer choice input or question input I type in, the question inputs all update the same (new and blank) state, and the answer choice inputs do the same thing. I made some edits, so I don't think that it's possible to type in them right now (because when I did make them typable the remove and add question buttons didn't work properly). If anyone has an explanation for how to make it so that the array states update correctly that would be super helpful. I am really new to this so if you have any other suggestions that would be cool as well. Thanks!

0 个答案:

没有答案