从表单输入组中获取值

Question

我有一组这样生成的表单输入：

有关完整组件，请参阅下面的更新 2。

因此，如果有三列，则该组中的三列将显示在表单中。我正在尝试从这些输入中提取数据，但我只需要 id。如何从TextField 中提取列 ID？

另外，我需要获取每个组的数据（即 ID），以便它们出现在数组中：

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

这些只是示例值，正如我提到的主要问题是我不确定如何从第一个输入中提取 columnId 的值。我也在努力获取多组数据。

对于这个问题的任何帮助将不胜感激。

感谢您的宝贵时间。

更新：

handleRuleChange 看起来像这样：

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

更新 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，但这与问题无关，只需将输入中的数据提取到转换数组中。

Answer 1

这可以满足您的要求。大多数代码都是可以理解的。随时询问。

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>
    )
  }

}

在动态创建的columns 状态下维护transformations 的状态。