フォーム入力グループからの値の取得

Question

フォーム入力のグループは、次のように生成されます。

完全なコンポーネントについては、下の更新2を参照してください。

したがって、3つの列がある場合、このグループの3つがフォームに表示されます。これらの入力からデータを抽出しようとしていますが、IDのみが必要です。 TextFieldから列IDを抽出するにはどうすればよいですか？彼らは、アレイに表示されるように

また、私はグループごとのデータ（ID）を取得する必要があります：

transformations: [{columnId: 1, ruleId: 4}, {columnId: 2, ruleId: 2}, {columnId:3 , ruleId: 1}] 

これらは一例の値は、私が述べたように、主な問題は、私ことがあります最初の入力からcolumnIdの値を抽出する方法がわかりません。私はまた、複数のデータセットを取得することに苦労しています。

この問題のお手伝いをさせていただきます。

お時間をいただきありがとうございます。

UPDATE：

handleRuleChangeは次のようになります。

handleRuleChange = (e, index, value) => { 
    this.setState({ 
    ruleId: value 
    }) 
} 

UPDATE 2：ここでは

はコンポーネントです：

import React from 'react' 
import Relay from 'react-relay' 

import { browserHistory } from 'react-router' 

import SelectField from 'material-ui/SelectField' 
import MenuItem from 'material-ui/MenuItem' 
import TextField from 'material-ui/TextField' 

import CreateTransformationSetMutation from '../mutations/CreateTransformationSetMutation' 

class CreateTransformationSetDialog extends React.Component { 

    componentWillMount() { 
    this.props.setOnDialog({ 
     onSubmit: this.onSubmit, 
     title: 'Create and Apply Transformation Set' 
    }) 
    } 

    initial_state = { 
    targetTableName: '', 
    ruleId: 'UnVsZTo1', 
    } 

    state = this.initial_state 

    onSubmit =() => { 
    const onSuccess = (response) => { 
     console.log(response) 
     browserHistory.push('/table') 
    } 

    const onFailure =() => {} 

    Relay.Store.commitUpdate(
     new CreateTransformationSetMutation(
     { 
      viewer: this.props.viewer, 
      version: this.props.viewer.version, 
      targetTableName: this.state.targetTableName, 
      transformations: ///this is where I need to get the values///, 
     } 
    ), 
     { onSuccess: onSuccess } 
    ) 
    } 

    handleTextChange = (e) => { 
    this.setState({ 
     targetTableName: e.target.value 
    }) 
    } 

    handleRuleChange = (e, index, value) => { 
    this.setState({ 
     ruleId: value 
    }) 
    } 

    render() { 
    return (
     <div> 
     <TextField 
      floatingLabelText="Table Name" 
      value={this.state.targetTableName} 
      onChange={this.handleTextChange} 
     /> 
     <br /> 
     { 
      this.props.viewer.version.columns.edges.map((edge) => edge.node).map((column) => 
      <div key={column.id}> 
       <TextField 
       id={column.id} 
       floatingLabelText="Column" 
       value={column.name} 
       disabled={true} 
       style={{ margin: 12 }} 
       /> 
       <SelectField 
       floatingLabelText="Select a Rule" 
       value={this.state.ruleId} 
       onChange={this.handleRuleChange} 
       style={{ margin: 12 }} 
       > 
       { 
        this.props.viewer.allRules.edges.map(edge => edge.node).map(rule => 
        <MenuItem 
         key={rule.id} 
         value={rule.id} 
         primaryText={rule.name} 
        /> 
       ) 
       } 
       </SelectField> 
      </div> 
     ) 
     } 

     </div> 
    ) 
    } 

} 

export default Relay.createContainer(CreateTransformationSetDialog, { 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on Viewer { 
     ${CreateTransformationSetMutation.getFragment('viewer')} 
     version(id: $modalEntityId) @include(if: $modalShow) { 
      ${CreateTransformationSetMutation.getFragment('version')} 
      id 
      name 
      columns(first: 100) { 
      edges { 
       node { 
       id 
       name 
       } 
      } 
      } 
     } 
     allRules(first: 100) { 
      edges { 
      node { 
       id 
       name 
      } 
      } 
     } 
     } 
    ` 
    }, 
    initialVariables: { 
    modalEntityId: '', 
    modalName: '', 
    modalShow: true, 
    }, 
    prepareVariables: ({ modalEntityId, modalName }) => { 
    return { 
     modalEntityId, 
     modalName, 
     modalShow: modalName === 'createTransformationSet' 
    } 
    } 
}) 

それはRelayを使用しているが、それはないです質問に接続されているだけで、入力からデータを抽出する必要がありますsを変換配列に追加します。

Answer 1

これはあなたの要件を満たすことができます。ほとんどのコードは理解できるでしょう。お気軽にお問い合わせください。動的に作成columnsた状態でtransformationsの状態を維持

class CreateTransformationSetDialog extends React.Component { 

    componentWillMount() { 
    this.props.setOnDialog({ 
     onSubmit: this.onSubmit, 
     title: 'Create and Apply Transformation Set' 
    }) 
    } 

    initial_state = { 
    targetTableName: '', 
    transformations: []; 
    ruleId:'UnVsZTo1' //default values for all rules 
    } 

    state = this.initial_state 

    onSubmit =() => { 
    const onSuccess = (response) => { 
     console.log(response) 
     browserHistory.push('/table') 
    } 

    const onFailure =() => {} 

    Relay.Store.commitUpdate(
     new CreateTransformationSetMutation(
     { 
      viewer: this.props.viewer, 
      version: this.props.viewer.version, 
      targetTableName: this.state.targetTableName, 
      transformations: this.state.transformations, 
     } 
    ), 
     { onSuccess: onSuccess } 
    ) 
    } 

    handleTextChange = (e) => { 
    this.setState({ 
     targetTableName: e.target.value 
    }) 
    } 

    handleRuleChange = (index, ruleId, columnId) => { //TODO: make use of index if needed 
    let transformations = this.state.transformations; 
    const isInStateWithIndex = transformations.findIndex((el) => el.columnId === columnId); 
    if(isInStateWithIndex > -1){ 
     transformations[isInStateWithIndex].ruleId = ruleId; //changed rule 
    }else{ 
     transformations.push({columnId: columnId, ruleId: ruleId}); //new column added to state. 
    } 
    this.setState({ 
     transformations: transformations 
    }); //do with es6 spread operators to avoid immutability if any 
    } 

    render() { 
    return (
     <div> 
     <TextField 
      floatingLabelText="Table Name" 
      value={this.state.targetTableName} 
      onChange={this.handleTextChange} 
     /> 
     <br /> 
     { 
      this.props.viewer.version.columns.edges.map((edge) => edge.node).map((column) => 
      <div key={column.id}> 
       <TextField 
       id={column.id} 
       floatingLabelText="Column" 
       value={column.name} 
       disabled={true} 
       style={{ margin: 12 }} 
       /> 
       <SelectField 
       floatingLabelText="Select a Rule" 
       value={this.state.ruleId} 
       onChange={(e, index, value) => this.handleRuleChange(index, value, column.id)} 
       style={{ margin: 12 }} 
       > 
       { 
        this.props.viewer.allRules.edges.map(edge => edge.node).map(rule => 
        <MenuItem 
         key={rule.id} 
         value={rule.id} 
         primaryText={rule.name} 
        /> 
       ) 
       } 
       </SelectField> 
      </div> 
     ) 
     } 

     </div> 
    ) 
    } 

} 

。