Обновление данных динамической формы - JavaScript / React - PullRequest
Новая
       10

Обновление данных динамической формы - JavaScript / React

0 голосов
/ 26 ноября 2018

У меня есть два поля ввода.Я также использую Fabric UI в качестве UI Framework для этого приложения.Мне нужно иметь возможность обновить представление при отправке.Я устанавливаю реквизит в состояние в компоненте.После установки я передаю эти значения в представление.Не знаете, как получить и обновить указанные значения. 

{
        isOpened: false,
        label: "Home Address",
        labelId: 2,
        values:
            [
                {field: "homeAddress1", value: "2343 Main Street"},
                {field: "homeAddress2", value: "New York, NY"}
            ]
    }

Я обновляю значение в каждом объекте при отправке.

class Info extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isOpened: this.props.info.isOpened,
      information: this.props.info
    }
    this.toggleEdit = this.toggleEdit.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  toggleEdit () {
    const { isOpened } = this.state
    this.setState({
      isOpened: !isOpened
    })
  }

  handleSubmit(event) {
    console.log('event', this.refs.prefName.value)
    event.preventDefault();

  }

  handleChange(event) {
      console.log('logging state', this.state)
      this.state.information.values.forEach(item => {
        // const { value } = item.value  
        // this.setState({value: event.target.value})
      })
    //   this.setState({value: event.target.value})
    console.log('event on change', event.target.value)
  }

  render () {
    const { isOpened } = this.state
    const { information } = this.state

    console.log(this.state, 'logging state')
    return (
      <div className="profile--info-wrapper">
        <h2 className="profile--sub-header--light">
          {information.label}
          {information.editField && (
            <Icon
              iconName="Edit"
              className={
                'ms-IconExample ' +
                (!isOpened ? 'pencil-icon' : 'pencil-icon-edit')
              }
              onClick={this.toggleEdit}
            />
          )}
        </h2>
        <form className="profile--form">
          {information.values.map(item => {
            return !isOpened ? (
              <FieldWrapper item={item} key={item.field} />
            ) : item.field === 'emergencyContactNumber' ||
            item.field === 'phoneNumber' ? (
                <MaskedTextField
                  label={item.fieldName}
                  mask="999-999-9999"
                  value={item.value}
                  key={item.field}
                  ref={item.field}
                />
              ) : (
                <TextField
                  label={item.fieldName}
                  value={item.value}
                  key={item.field}
                  onChange={this.handleChange}
                  ref={item.field}
                />
              )
          })}
          {isOpened && (
            <div className="ms-Grid-row button--wrapper">
              <PrimaryButton
                data-automation-id="test"
                text="Save"
                onClick={this.handleSubmit}
                allowDisabledFocus={true}
              />
              <DefaultButton
                data-automation-id="test"
                text="Cancel"
                onClick={this.toggleEdit}
              />
            </div>
          )}
        </form>
      </div>
    )
  }
}
...