ReactJS 中的动态/模块化输入组件答案

【问题标题】：Dynamic/Modular Input Component in ReactJSReactJS 中的动态/模块化输入组件
【发布时间】：2016-05-18 07:30:45
【问题描述】：

我刚开始使用 React，但我还没有找到解决我问题的可用解决方案。我偶然发现了这个视频about Redux Form，但它在我的情况下不起作用。

我希望我的表单有一个动态的“输入”字段，这意味着我有一个组件，我主要指定它是输入还是文本区域（此项目不需要其余部分）

这是我的 DashFormInput.js，它应该是单个“输入”字段，但我希望它是动态的，因为能够更改它输出的 html 元素以及道具。

var DashFormInput = React.createClass({
getInitialState: function() {
    return {
        value: '',
        actionType: '',
        placeholder: '',
        name: '',
        type: ''
    }
},
handleChange: function(event) {
    this.setState({value: event.target.value});
},
render: function() {
    return (
        <input
            actionType={this.props.actionType}
            onChange={this.handleChange}
            placeholder={this.props.placeholder}
            name={this.props.name}
        />
    );
}
});

这是我的 DashboardForm.js，它是我想要调用我的 DashFormInput 组件的父组件。

var DashboardForm = React.createClass({
    handleSubmit(event) {
    console.log(event);
    event.preventDefault();
    console.log("Form submitted");
},
render: function() {
    return (
        <form
            onSubmit={this.handleSubmit}
            id="dashboardForm" className="half-section">

            <DashFormInput
                type={'text'}
                name={'address'}
                placeholder={'address'}
                className={'dashInput subsection'} />
        </form>
    )
}
});

我正在寻找一个简单的解决方案，不需要太花哨的东西，但如果这在标准 React 生态系统中是不可能的，我会用老式的方式来做。

提前致谢。

【问题讨论】：

标签： forms input reactjs

【解决方案1】：

修改你的 DashFormInput.js 渲染方法，如

render: function() {
    if(this.props.type=="text"){
        return (
            <input
                actionType={this.props.actionType}
                onChange={this.handleChange}
                placeholder={this.props.placeholder}
                name={this.props.name}
            />
        );
    }
    if(this.props.type=="textarea"){
        return (
            <textarea rows="4" cols="50"
                actionType={this.props.actionType}
                onChange={this.handleChange}
                placeholder={this.props.placeholder}
                name={this.props.name}
            ></textarea>
        );
    }else{
        return <div>No input type defined</div>;
    }
}

现在从 DashboardForm.js 您可以将 DashFormInput 组件的 type 属性更改为“text”或“textarea”，因此您将拥有输入框或 textarea。

【讨论】：

【解决方案2】：

另一个想法是利用 create 元素（我使用的是 ES2015 样式），

class DashFormInput extends React.Component {
  constructor() {
    super();
    this.state =  {
      value: '',
      actionType: '',
      placeholder: '',
      name: '',
      type: ''
    };
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  render() {
    return (
      React.createElement(this.props.elementType,
        {
          type: this.props.type,
          name: this.props.name, 
          placeholder:this.props.placeholder, 
          className: this.props.className,
          onChange: this.handleChange
        }
      )
    );
  }
}

class DashboardForm extends React.Component {
  constructor(){
    super();
  }

  handleSubmit(event) {
    console.log(event);
    event.preventDefault();
    console.log("Form submitted");
  }

  render() {
    return (
      <form
        onSubmit={this.handleSubmit.bind(this)} 
        id="dashboardForm" className="half-section">
        <DashFormInput
          elementType = {'textarea'}
          type={'text'}
          name={'address'}
          placeholder={'address'}
          className={'dashInput subsection'} />
      </form>
    );
  }
};

React.render(
  <DashboardForm />,
  document.getElementById('react_example')
);

【讨论】：