Question

我的动态表单有一个小问题。在render方法下面的代码中，我具有映射输入和下拉选择菜单以填充state.questions [{title：“”，type：“”}]的代码。您可以看到addQuestionsHandler方法来添加更多问题，而questionsInputHandler可以处理问题值。
surveyInputHandler方法处理返回函数中的静态问题。我遇到的问题是，在我的动态问题代码中，输入值和选择下拉值最终在state.questions [{title：“”，type：“”}]中结束。如果我输入“ Test”-标题和类型都将为“ Test”。如果我输入“测试”并选择value =“单选按钮”，则标题和类型均为“单选按钮”。如果我未选择下拉选项值，则两者均为输入值。如果我确实选择了下拉选项值，那么输入值将被下拉选择值覆盖。
我已经绞尽脑汁了一段时间，但是我需要更多的眼睛。您能否让我知道我做错了什么？非常感谢。

 const questionTypes = [
"Select Question Type",
"Textbox",
"Radio Button",
"Checkbox"
];

class SurveyQuestions extends Component {
constructor(props) {
    super(props);
    this.state = {
    title: "",
    description: "",
    pointsValue: 0,
    questions: [
        {
        title: "",
        type: ""
        }
    ]
    };
}

surveyInputHandler = e => {
    console.log(e.target.value);
    this.setState({
    [e.target.name]: e.target.value,
    [e.target.title]: e.target.value,
    [e.target.description]: e.target.value,
    [e.target.pointsValue]: e.target.value
    });
};

questionsInputHandler = idx => e => {
    console.log(e.target.value);
    const newQuestions = this.state.questions.map((question, qidx) => {
    if (idx !== qidx) return question;
    return {
        ...question,
        title: e.target.value,
        type: e.target.value
    };
    });
    this.setState({
    questions: newQuestions
    });
};

addQuestionHandler = () => {
    this.setState(prevState => ({
    questions: [...prevState.questions, { title: "", type: "" }]
    }));
};

submitHandler = e => {
    const { title, description, pointsValue, questions } = this.state;
    console.log(
    title,
    description,
    pointsValue,
    questions.map(question => ({ ...question }))
    );
    this.setState({
    title: "",
    description: "",
    pointsValue: "",
    questions: [{ title: "", type: "" }]
    });
    e.preventDefault();
};

render() {
    const { title, description, pointsValue, questions } = this.state;
    const questionsDisplay = questions.map((question, idx) => (
    <div key={idx} className="SurveyQuestions__QuestionContainer">
        <h5>Question {idx + 1}</h5>
        <label htmlFor="questionTitle">Question Title</label>
        <input
        type="text"
        id="questionTitle"
        placeholder={`Question Title #${idx + 1}`}
        value={question.title}
        onChange={this.questionsInputHandler(idx)}
        />
        <label htmlFor="questionType">Type</label>
        <select
        className="SurveyQuestions__QuestionTypesDropdown"
        value={question.type}
        onChange={this.questionsInputHandler(idx)}
        >
        {questionTypes.map((type, tidx) => (
            <option key={tidx} id={`${type}-${tidx}`} value={type}>
            {type}
            </option>
        ))}
        </select>
    </div>
    ));

Answer 1

已解决：因此，简单的解决方案是为选择下拉菜单创建一个单独的输入处理程序。代码如下：

questionTypeInputHandler = idx => e => {
const newQuestions = this.state.questions.map((question, qidx) => {
  if (idx !== qidx) return question;
  return {
    ...question,
    type: e.target.value
  };
});
this.setState({
  questions: newQuestions
});

};

选择菜单和输入值更改相同的状态值

1 个答案: