Question

这是我的代码中有用的部分：

class Answers extends Component {

  constructor(props) {
    super(props);
    this.state = {
      answers: Array(4).fill(""),
      correctAnswers: [],
    };
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  // let event = {
  //   index: 1,
  //   value: 'hello'
  // };
  handleUpdate (event) {
    //if ("1" == 1) // true
    //if ("1" === 1) //false 
    var answers = this.state.answers;
    answers[event.index] = event.value;
    this.setState(() => ({
      answers: answers
    }));

    console.log(event);
  }

  render () {
    return (
      <div id="answers">
                Answer Choices<br />
        {this.state.answers.map((value, index) => (
          <Answer value={value} key={index} onUpdate={this.handleUpdate} number={index}/>
        ))}
      </div>
    );
  }
}

class Answer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: "",
      answer: props.value,
      correctAnswers: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState((previousState, props) => ({
      answer: value
    }));
    this.props.onUpdate({
      index: this.props.number,
      value
    });

    //
    // let sample = {
    //   kyle: "toast",
    //   cam: "pine"
    // };

    // sample.kyle
    // sample.cam

  }
  render () {
    return (
      <div>
        <input type="checkbox"/>
        <input type="text" value={this.state.answer} onChange={this.handleChange}/>
      </div>
    )
  }
}


var questionIdx = 0;

class Questions extends Component {
  constructor(props){
    super(props);
    this.state = {
      questions:[]
    }
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  handleUpdate (event) {
    //if ("1" == 1) // true
    //if ("1" === 1) //false 
    var questions = this.state.questions
    questions[event.index] = event.value;
    this.setState(() => ({
      questions: questions
    }));


    console.log(event);
  }

  render () {
    return (
      <div id="questions">
        <ol id="quesitonsList">
          <li id="oneQuestion">
            <Question onUpdate={this.handleUpdate} number={questionIdx}/>
          </li>
        </ol>
      </div>
    );
  }
}

class Question extends Component {
  constructor(props){
    super(props);
    this.state = {
      question: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState((previousState, props) => ({
      question: value
    }));
    //if (this.prop.questions.indexOf(value) == questionIdx) {
      this.props.onUpdate({
        index: questionIdx,
        value
      });
   // }
  }

  render () {
    return (
      <div id="question">
        Question<br />
        <input type="text" value={this.state.question} onChange={this.handleChange}/>
        <PhotoDropZone />
        <Answers />
      </div>
    );
  }
}

class AddQuestionButton extends Component {

  addQuestion () {

  }

  render () {
    return (
      <div id="addQuestionButton">
        <button id="addQuestionButton" onClick={this.addQuestion}>Add Question</button>
      </div>
    );
  }
}

所以我要弄清楚的是如何使用我的addQuestionButton添加
<li id="oneQuestion"> <Question onUpdate={this.handleUpdate} number={questionIdx}/> </li>
转到我的questionsList类中的<ol></ol> Questions。我很难弄清楚如何解决这个问题，我是React和JS的新手。我不需要每个发言的确切答案，但朝正确方向的提示会有所帮助。谢谢！

Answer 1

也许对您有帮助：

const questionsList  = [1, 2, 3, 4, 5];
const listItems = questionsList.map((item, index) =>(
  <li key="{index}">
       <Question onUpdate={this.handleUpdate} number={questionIdx}/>
 </li>
));

ReactDOM.render(
  <ol>{listItems}</ol>
);

Answer 2

您可以在Questions中创建一个函数，向您的questions状态数组中添加一个问题，并将其作为道具传递给AddQuestionButton组件。

示例

class Questions extends React.Component {
  state = {
    questions: ["What is this?"]
  };

  addQuestion = question => {
    this.setState(prevState => ({
      questions: [...prevState.questions, question]
    }));
  };

  render() {
    return (
      <div id="questions">
        <ol id="quesitonsList">
          {this.state.questions.map(question => (
            <li id="oneQuestion"> {question} </li>
          ))}
        </ol>
        <AddQuestionButton onClick={this.addQuestion} />
      </div>
    );
  }
}

class AddQuestionButton extends React.Component {
  addQuestion = () => {
    this.props.onClick(
      Math.random()
        .toString(36)
        .substring(7) + "?"
    );
  };

  render() {
    return (
      <div id="addQuestionButton">
        <button id="addQuestionButton" onClick={this.addQuestion}>
          Add Question
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Questions />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

通过React中的按钮添加列表项？

2 个答案: