我如何可以顯示或基於由事件

Question

我有以下形式，其中包含一個字段和FieldArray引起了一些條件Redux的形式隱藏字段。在FieldArray內，我有一個選擇字段，有兩個選項：Demo和Final。選擇演示時，我想隱藏維護期和維護類型字段，選擇最終時，應顯示演示持續時間字段，應隱藏前2個字段。代碼如下：

const renderLicenses = ({ fields }) => (
    <ul className="list-unstyled"> 
     <li> 
      <button type="button" className="btn btn-info" onClick={() => fields.push({})}>Add License</button> 
     </li> 
     {fields.map((license, index) => 
      <li key={index}> 
       <button 
        type="button" 
        title="Remove license" 
        onClick={() => fields.remove(index)}/> 
       <h4>License #{index + 1}</h4> 
       <Field 
        name={`${license}.licenseName`} 
        type="text" 
        component={renderSelectLicenses} 
        collectionOfOptions={LICENSES} 
        label="Please select license name"> 
       </Field> 
       <Field 
        name={`${license}.licenseType`} 
        type="text" 
        component={renderSelectLicenseType} 
        label="Please select license type"/> 
       <Field 
        name={`${license}.validFrom`} 
        type="text" 
        component={renderCalendar} 
        label="Valid from"/> 
       <Field 
        name={`${license}.validTo`} 
        type="text" 
        component={renderCalendar} 
        label="Valid to"/> 
       <Field 
        name={`${license}.demoDuration`} 
        type="text" 
        component={renderField} 
        label="Demo duration"/> 
       <Field 
        name={`${license}.maintenancePeriod`} 
        type="text" 
        component={renderField} 
        label="Maintenance period"/> 
       <Field 
        name={`${license}.maintenanceType`} 
        type="text" 
        component={renderSelectMaintenanceTypes} 
        collectionOfOptions={MAINTENANCE_OPTIONS} 
        label="Maintenance type"/> 
      </li> 
     )} 
    </ul> 
); 

這是renderSelectLicenseType代碼：

import React from 'react'; 
    const renderSelectLicenseType = ({input, label}) => (
    <div className="form-group"> 
     <label>{label}</label> 
     <select className="form-control" {...input}> 
      <option disabled>Please select a license type</option> 
      <option value="demo">Demo</option> 
      <option value="final">Final</option> 
     </select> 
    </div> 
    ); 

export default renderSelectLicenseType; 

基本上，我想有選擇onChange事件和隱藏/顯示如果event.target其他領域。值是'demo'或'final'。我不知道如何該事件傳播到是自包含的其他領域：

const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div className="form-group"> 
    <label>{label}</label> 
    <div> 
     <input className="form-control" {...input} type={type} placeholder= {label}/> 
     {touched && error && <span>{error}</span>} 
    </div> 
</div> 

）;

最後，這是一個包含整個表單的主組件的代碼：我是新來的Redux的形式和有困難的時候試圖弄清楚這一點

render() { 
     const {handleSubmit, invalid, submitting} = this.props; 
     return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} style={tempStyles}> 
       <Field name="machineID" type="text" component={renderField} label="Machine ID"/> 
       <FieldArray name="licenses" component={renderLicenses} /> 
       <div className="form-group"> 
        <RaisedButton type="submit" label="Add new machine" primary={true} disabled={invalid || submitting}/> 
       </div> 
      </form> 
     ) 
    } 

export default reduxForm({ 
    form: 'addMachine', 
    validate: validate 
})(AddMachineMaster); 

。謝謝！

Answer 1

Redux的形式是onChange道具已經安裝到您的select場：這是你與{...input}路過這裏的道具之一：

<select className="form-control" {...input}> 
    <option disabled>Please select a license type</option> 
    <option value="demo">Demo</option> 
    <option value="final">Final</option> 
</select> 

這意味着你的價值已經在終極版商店。但是，您需要使用connect來提取它，因爲redux-form的新版本不會將表單與每個值相關聯以提高性能。

有中，你想要做什麼的文檔的例子。在這種情況下，當電子郵件字段被選中時，顯示輸入電子郵件地址的輸入，否則將隱藏。

http://redux-form.com/6.5.0/examples/selectingFormValues/

它的要點是裝飾你的形式兩次，一次與reduxForm，另一個手動connect。在從狀態到道具的特定映射中，您可以使用redux-form提供的選擇器精確提取所需的表單值並將其注入爲道具。

這種道具可以傳遞到要顯示/隱藏的組件。