Forms 更新一对文本字段中的值

我有一个表单组件：

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

import { browserHistory } from 'react-router'

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: '',
    transformations: this.props.viewer.version.columns.edges.map(edge => edge.node).map(column => {
      return {
        targetColumnName: column.name, 
        ruleExpression: '{{' + column.name + '}}'
      }
    })
  }

  state = this.initial_state

  onSubmit = () => {
    const onSuccess = (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: JSON.stringify({transformations: this.state.transformations}),
        }
      ),
      { onSuccess: onSuccess }
    )
  }

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

  handleTransChange = (e) => {

    ////what should go here////

  }

  render() {
    return (
      <div>
        <TextField
          floatingLabelText="Table Name"
          value={this.state.targetTableName}
          onChange={this.handleTableNameChange} 
        />
        <br />
        {
          this.props.viewer.version.columns.edges.map((edge) => edge.node).map((column, i) =>
            <div key={column.id}>
              <TextField
                name="targetColumnName"
                floatingLabelText="Target Column"
                value={this.state.transformations[i].targetColumnName}
                onChange={this.handleTransChange}
                style={{ margin: 12 }} 
              />
              <TextField
                name="ruleExpression"
                floatingLabelText="Rule to Apply"
                value={this.state.transformations[i].ruleExpression}
                onChange={this.handleTransChange}
                style={{ margin: 12 }}
              />
            </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
              }
            }
          }
        }
      }
    `
  },
  initialVariables: {
    modalEntityId: '',
    modalName: '',
    modalShow: true,
  },
  prepareVariables: ({ modalEntityId, modalName }) => {
    return {
      modalEntityId,
      modalName,
      modalShow: modalName === 'createTransformationSet'
    }
  }
})

我希望能够对其进行更新，以便状态可以更改，例如：

transformations: [
  {targetColumnName: 'ID', ruleExpression: '{{ID}}'},
  {targetColumnName: 'First Name', ruleExpression: '{{FirstName}}'},
  {targetColumnName: 'Percentage', ruleExpression: '{{Percentage/100}}'}
]

表单是使用

继电器构建的，但这与此问题无关

在此方面的任何帮助都将不胜感激

谢谢您的时间。
我遇到了类似的问题，我将值放在
value
属性中，使用
defaultValue='some-value'
以便可以对其进行变异和更改

您试图做的事情似乎不可能防止XSS（跨站点脚本）

这样写：

<TextField
  name="targetColumnName"
  floatingLabelText="Target Column"
  defaultValue={this.state.transformations[i].targetColumnName} {/* change from value to defaultValue */}
  onChange={this.handleTransChange}
  style={{ margin: 12 }} 
/>



<TextField
  name="targetColumnName"
  floatingLabelText="Target Column"
  defaultValue={this.state.transformations[i].targetColumnName} {/* change from value to defaultValue */}
  onChange={this.handleTransChange}
  style={{ margin: 12 }} 
/>