Javascript 关于ReactJS中的更改的输入？

我正在学习react和react表单，并尝试创建一个动态的、可伸缩的表单。我已经设置了一个状态，该状态有一个

类型

，根据该类型，相应的输入类型会显示出来（因此可以是文本、文本区域、收音机、选择、日期或复选框）。我正在尝试编写一个函数，使它能够根据表单输入的

类型

动态设置更改，但我一直在尝试实现相同的功能

因此，如果

类型===选择

，

事件.target.value

或

类型===复选框

，

事件.target.checked

等等

请检查这个工作状态

请查看此完整的代码段：-

import React from "react";
import "./styles.css";

class App extends React.Component {
  state = {
    Forms: [
      { name: "select", type: "select", options: ["a", "b", "c"] },
      { name: "Radio", type: "radio", options: ["a", "b", "c"] },
      { name: "Date", type: "date", value: "2018-07-22" },
      { name: "Text Input", type: "text", value: "text input" },
      {
        name: "Checkbox",
        type: "checkbox",
        options: ["a", "b", "c"],
        value: false
      },
      { name: "Textarea", type: "textarea", value: "text area" }
    ]
  };

  handleFormStateChange = (event, idx) => {
    const target = event.target;
    const form = [...this.state.forms];
    form[idx].value = target.type === "select" ? target.value : "";
    form[idx].value = target.type === "radio" ? target.value : "";
    form[idx].value =
      target.type === "date" ||
      target.type === "text" ||
      target.type === "textarea"
        ? target.value
        : "";
    form[idx].value = target.type === "checkbox" ? target.checked : "";
    this.setState({
      form
    });
  };

  getField = field => {
    switch (field.type) {
      case "date":
      case "text":
      case "textarea":
        return <input type={field.type} value={field.value} />;
      case "select":
        return (
          <select name={field}>
            {field.options.map(option => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
            ;
          </select>
        );
      case "radio":
      case "checkbox":
        return (
          <div>
            {field.options.map(option => (
              <label>
                {option}:
                <input
                  key={option}
                  type={field.type}
                  name={option}
                  value={option}
                />
              </label>
            ))}
          </div>
        );
      default:
        return <div>Unknown form field</div>;
    }
  };

  renderForm = () => {
    return this.state.Forms.map((field, index) => (
      <label key={index}>
        {field.name}
        {this.getField(field)}
      </label>
    ));
  };

  render() {
    return <div>{this.renderForm()}</div>;
  }
}

export default App;

从“React”导入React；
导入“/styles.css”；
类应用程序扩展了React.Component{
状态={
表格：[
{名称：“选择”，类型：“选择”，选项：[“a”、“b”、“c”]}，
{名称：“无线电”，键入：“无线电”，选项：[“a”、“b”、“c”]}，
{名称：“日期”，类型：“日期”，值：“2018-07-22”}，
{名称：“文本输入”，类型：“文本”，值：“文本输入”}，
{
名称：“复选框”，
键入：“复选框”，
选项：[“a”、“b”、“c”]，
值：false
},
{名称：“Textarea”，类型：“Textarea”，值：“text area”}
]
};
handleFormStateChange=（事件，idx）=>{
const target=event.target；
const form=[…this.state.forms]；
表单[idx]。值=目标。类型==“选择”？目标。值：“”；
表单[idx]。值=目标。类型==“无线电”？目标。值：“”；
表单[idx]。值=
target.type==“日期”||
target.type==“文本”||
target.type==“textarea”
？目标价值
: "";
表单[idx]。值=target.type==“复选框”？target.checked:”；
这是我的国家({
形式
});
};
getField=field=>{
开关（字段类型）{
案件“日期”：
案例“文本”：
案例“textarea”：
返回；
案例“选择”：
返回(
{field.options.map（option=>(
{option}
))}
;
);
案例“无线电”：
案例“复选框”：
返回(
{field.options.map（option=>(
{选项}：
))}
);
违约：
返回未知表单字段；
}
};
renderForm=（）=>{
返回此.state.Forms.map（（字段，索引）=>(
{field.name}
{this.getField（field）}
));
};
render（）{
返回{this.renderForm（）}；
}
}
导出默认应用程序；

我仍在努力学习并花时间与ReactJS在一起，因此任何帮助都将不胜感激。非常感谢。：）

const handleChange=（e）=>{
让v=e.target.type==“复选框”？e.target.checked:e.target.value；
设定状态(
{
……国家，
[e.target.name]：v
}
);
};

只需勾选是复选框还是否。其他输入类型有值属性，但复选框有

已勾选的

属性。 不要忘记为您的输入设置一个

名称
道具。
这应该可以

handleFormStateChange = (event, idx) => {
    const target = event.target;
    const form = [...this.state.Forms];
    form[idx].value = "";
    form[idx].value =
      target.type === "select-one" ? target.value : form[idx].value;
    form[idx].value = target.type === "radio" ? target.value : form[idx].value;
    form[idx].value =
      target.type === "date" ||
      target.type === "text" ||
      target.type === "textarea"
        ? target.value
        : form[idx].value;
    if (target.type === "checkbox") {
      if(!form[idx].selectedValues) {
        form[idx].selectedValues = {};    
      }
      form[idx].selectedValues[target.value] = target.checked;
    }
    this.setState({
      form
    });
  };

getField = (field, index) => {
    switch (field.type) {
      case "date":
      case "text":
      case "textarea":
        return (
          <input
            type={field.type}
            value={field.value}
            onChange={event => {
              this.handleFormStateChange(event, index);
            }}
          />
        );
      case "select":
        return (
          <select
            name={field}
            value={field.value}
            onChange={event => {
              this.handleFormStateChange(event, index);
            }}
          >
            {field.options.map(option => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
            ;
          </select>
        );
      case "radio":
      case "checkbox":
        return (
          <div>
            {field.options.map(option => (
              <label key={field.type + "op" + option}>
                {option}:
                <input
                  onChange={event => {
                    this.handleFormStateChange(event, index);
                  }}
                  key={option}
                  type={field.type}
                  name={option}
                  value={option}
                />
              </label>
            ))}
          </div>
        );
      default:
        return <div>Unknown form field</div>;
    }
  };

  renderForm = () => {
    return this.state.Forms.map((field, index) => (
      <label key={index}>
        {field.name}
        {this.getField(field, index)}
      </label>
    ));
  };

handleFormStateChange=（事件，idx）=>{
const target=event.target；
const form=[…this.state.Forms]；
形式[idx]。值=”；
表单[idx]。值=
target.type==“选择一个”？target.value:form[idx].value；
表单[idx]。value=target.type==“radio”？target.value:form[idx]。value；
表单[idx]。值=
target.type==“日期”||
target.type==“文本”||
target.type==“textarea”
？目标价值
：form[idx]。值；
如果（target.type==“复选框”）{
如果（！form[idx].selectedValues）{
表单[idx]。selectedValues={}；
}
表单[idx]。selectedValues[target.value]=target.checked；
}
这是我的国家({
形式
});
};
getField=（字段，索引）=>{
开关（字段类型）{
案件“日期”：
案例“文本”：
案例“textarea”：
返回(
{
此.handleFormStateChange（事件、索引）；
}}
/>
);
案例“选择”：
返回(
{
此.handleFormStateChange（事件、索引）；
}}
>
{field.options.map（option=>(
{option}
))}
;
);
案例“无线电”：
案例“复选框”：
返回(
{field.options.map（option=>(
{选项}：
{
此.handleFormStateChange（事件、索引）；
}}
键={option}
类型={field.type}
名称={option}
值={option}
/>
))}
);
违约：
返回未知表单字段；
}
};
renderForm=（）=>{
返回此.state.Forms.map（（字段，索引）=>(
{field.name}
{this.getField（field，index）}
));
};

首先，
checkbox
type可以选择多个值，因此我们需要为其中的每个选项设置一个状态。因此，在表单对象上引入了
selectedValues
object

第二件要注意的事情是，当定义了
select
元素时，其
事件.target.type
是
select one
，而不是
select

我们需要注意的最后一件事是，重新使用
form[idx].value的原始值，其中您的条件是伪造的，而不是使用空字符串。为else部分使用空字符串将覆盖您以前设置的值。
可能会帮助您。：）@随便什么