Динамический/модульный входной компонент в ReactJS

Question

Я только начинаю с 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> 
    ) 
} 
}); 

Я ищу простое решение, то не что-нибудь слишком фантазии нужно, но если это просто не возможно со стандартом Реагировать экосистема я буду делать это старомодным способом.

Заранее благодарен.

Answer 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 компонента пропеллер в «текст» или «текстовой» и, соответственно, вы будете иметь поле ввода или текстовое поле.

Answer 2

Другая идея заключается в том, используя создать элемент (я использовал стиль 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') 
);