Question

我正在寻找有关使用映射与组件在React中动态创建JSON元素的最佳方法的建议。

我认为我们可以将每个输入类型作为单独的组件类，并构造传递props的元素并绑定更改。

E.g。 JSON：

    {
        "type": "text",
        "name": "FirstName",                    
        "class": "text",
        "placeholder": "Enter first name"
    },
    {
        "type": "text",
        "name": "Surname",                  
        "class": "text",
        "placeholder": "Enter surname"
    },

阵营：

class InputText extends React.Component {
  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  render() {
    return (
      <div className={className}>
        <label htmlFor={this.props.name}>{this.props.title}</label>
        <input
          onChange={this.changeValue}
          name={this.props.name}
          type={this.props.type}
          value={this.props.value}
        />
      </div>
    );
  }
}

有关迭代（和验证）JSON中每个项目的最佳方法的建议吗？我在这里走在正确的轨道上吗？谢谢！

Answer 1

您需要一个map个数据的组件，并返回InputText的集合。在这里，我称之为Main。

class Main extends React.Component {
  render() {

    // Map over the data and return the completed component
    // On each iteration pass in the object data as `params`.
    // You can deconstruct this in the `InputText` component
    return data.map((input, i) => {
      return <InputText key={i} params={input} />
    });
  }
}

现在，您可以通过解构this.props.params并使用这些变量来填充组件来获取组件中的这些参数。

class InputText extends React.Component {

  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue() {
    console.log('Placeholder to prevent bug');
  }

  render() {

   // Use destructuring to grab the individual properties from params
   const { type, name, classname, placeholder } = this.props.params;

    // Use those properties in the returned component elements
    return (
      <div className={classname}>
        <label htmlFor={name}>Test</label>
        <input
          onChange={this.changeValue}
          name={name}
          type={type}
          placeholder={placeholder}
        />
      </div>
    );
  }
}

<强> DEMO

Answer 2

InputText.jsx

在互动后，每个InputText都会引发onChange说明哪个输入字段已被编辑，以及它的当前值是什么。

import * as React from 'react';

export class InputText extends React.Component {
  onChange = (e) => {
    const {onChange, name} = this.props;
    const {value} = e.target;
    if (onChange) {
      onChange(name, value);
    }
  }

  render() {
    const {name, title, type, placeholder, className, value} = this.props;
    return (
      <div className={className}>
        <label htmlFor={name}>{title}</label>
        <input
          placeholder={placeholder}
          name={name}
          type={type}
          value={value}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

Form.jsx

这里我们保持所有输入的状态。奇怪的reduce用于初始化状态的形状，输入名称是对象属性。

// initial state
{
  "FirstName": "",
  "Surname": ""
}

编辑this.setState({[name]: value})后，关联的属性会更新。

import * as React from 'react';
import { InputText } from './InputText';

const inputs = [{
  "type": "text",
  "title": "some title",
  "name": "FirstName",
  "class": "text",
  "placeholder": "Enter first name"
}, {
  "type": "text",
  "title": "some other title",
  "name": "Surname",
  "class": "text",
  "placeholder": "Enter surname"
}];

export class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = inputs.reduce((acc, input) => {
      return {...acc, [input.name]: ''};
    }, {})
  }

  onChange = (name, value) => {
    this.setState({[name]: value});
  }

  render() {
    const list = inputs.map(input => {
      return (
        <InputText
          value={this.state[input.name]}
          key={input.name}
          type={input.type}
          name={input.name}
          title={input.title}
          className={input.class}
          placeholder={input.placeholder}
          onChange={this.onChange}
      />
      );
    });

    return (
      <form>
        {list}
      </form>
    );
  }
}

Answer 3

假设您想要迭代的JSON在数组中提供，您可以执行类似这样的操作。它将为每个JSON创建一个标签和输入元素。

render() {
  return (
    <div className={className}>
      {
      this.props.yourArray.map(value=>(
        <label htmlFor={value.name}>{value.title}</label>
        <input
          onChange={this.changeValue}
          name={value.name}
          type={value.type}
          value={value.value}
        />
      ))
      }
    </div>
  );
}

React.js - 从JSON模式创建输入元素

3 个答案:

InputText.jsx

Form.jsx