Material Ui - Невозможно ввести текстовое поле ввода / установить значения для контролируемого компонента - PullRequest
Новая
       4

Material Ui - Невозможно ввести текстовое поле ввода / установить значения для контролируемого компонента

0 голосов
/ 05 июня 2018

Я попытался создать пользовательский компонент ввода с inputRef (материал ввода компонента ввода).Похоже, что ссылка на компонент работает, но я не могу ввести какое-либо значение в текстовое поле после того, как я установил атрибут value .Я думаю, это из-за того, как я реализовал событие onchange.Я не уверен, что мне не хватает.Пожалуйста, помогите.

Вот коды и адрес URL

https://codesandbox.io/s/pjlwqvwrvm

Ответы [ 3 ]

0 голосов
/ 05 июня 2018

  1. Вы можете либо перейти на inputRef - тогда ваше значение и событие onChange являются дополнительными - это называется неконтролируемым компонентом.Вы можете увидеть больше об этом здесь: https://reactjs.org/docs/uncontrolled-components.html

  2. Или вы можете сделать это с событием value & onChange - и работать с контролируемыми компонентами, вы можете узнать больше об управляемых компонентах здесь: https://reactjs.org/docs/forms.html#controlled-components

Как решить это (неуправляемо) с помощью inputRef: 

class App extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    console.log("input value: ", this.input.value); // will now show you correct input value
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <CustomInput
            labelText="State"
            id="state"
            inputRef={input => {
              this.input = input;
            }}
          />
          <Button onClick={this.handleSubmit} color='primary'>Submit</Button>
        </form>
      </div>
    );
  }
}

Вместо «this.state = input», связать ввод с чем-то другим, потому что this.state зарезервировано длялокальное состояние компонента React, и он не будет работать с ним, не так.

Как решить его (можно контролировать) с помощью события state, value & onChange: 

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: props.state || ''
    }
  }

  handleSubmit = (event) =>{
    event.preventDefault();
    console.log("state: ", this.state.value); // will now show you correct input value
  }

  handleChange = (event) => {
    this.setState({value: event.target.value});
  }

  render() {
    const {value} = this.state;

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <CustomInput
            labelText="State"
            id="state"
            onChange={this.handleChange}
            value={value}
          />
          <Button onClick={this.handleSubmit} color='primary'>Submit</Button>
        </form>
      </div>
    );
  }
}

Примечаниечто я добавил конструктор и определил локальное состояние для компонента, и я изменяю значение внутри состояния с помощью this.setState (потому что состояние является неизменным, и это правильный способ его обновления).

В обоихНапример, вы можете получить входное значение внутри метода handleSubmit, будете ли вы работать с управляемыми или неуправляемыми компонентами, это ваше дело:)

0 голосов
/ 17 апреля 2019

Используйте value={this.state} или value={this.value}

Вот ваш код песочницы Обновлено

https://codesandbox.io/s/qqk2qoxmlj

0 голосов
/ 05 июня 2018

На самом деле вам не нужен реквизит onChange для получения измененного значения ..

Просто получите значение из onchange и установите значение в состоянии value.

Еще одна ошибкаесли вы не создали конструктор, а передали this.props.value в значение prop.Это не обновляется ..

Теперь я создал конструктор и передал значение this.state.value для реквизитов значения.

Теперь вы получите измененное значение в компоненте custominput и в функции отправкитакже .. 

import React from "react";
import { render } from "react-dom";
import { Input } from "material-ui-next";
import trimStart from "lodash/trimStart";
import PropTypes from "prop-types";

const defaultProps = {
  state: "",
  onChange: () => {} // no need
};

const propTypes = {
  state: PropTypes.string,
  onChange: PropTypes.func
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      value:''
    }
  }
  handleSubmit(event) {
    event.preventDefault();
    console.log("state: " + this.state.value); //shows onChanged value in console
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <CustomInput
            labelText="State"
            id="state"
            value={this.state.value}
            onChange={e=> {
              this.setState({value:e.target.value})
            }}
          />
        </form>
      </div>
    );
  }
}

App.propTypes = propTypes;
App.defaultProps = defaultProps;

class CustomInput extends React.Component {
  render() {
    const {
      classes,
      formControlProps,
      value,
      onChange,
      labelText,
      id,
      labelProps,
      inputRef,
      inputProps
    } = this.props;
    return (
      <div {...formControlProps}>
        {labelText !== undefined ? (
          <div htmlFor={id} {...labelProps}>
            {labelText}
          </div>
        ) : null}
        <Input
          classes={{
            root: labelText !== undefined ? "" : classes.marginTop
          }}
          id={id}
          value={value} ///////// Fixed ////////
          onChange={onChange}
          inputRef={inputRef}
          {...inputProps}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Вот код в песочнице, проверьте это ..

https://codesandbox.io/s/84rjk4m8l8

...