Невозможно изменить текстовые поля пользовательского интерфейса материала в React - PullRequest
Новая
       12

Невозможно изменить текстовые поля пользовательского интерфейса материала в React

0 голосов
/ 14 марта 2019

Я новичок в React, Я попытался создать форму, используя UI материала в React. Я смог разработать форму с текстовыми полями, но не смог отредактировать данные, если я использую значение атрибута для текстового поля. И как я могу вызвать родительскую функцию, когда вызывается функция onChange для Textfield, которое есть в дочернем компоненте. Вот мой код.

В родительском компоненте я включаю вот так 

 render() {
const { name, email, mobileNumber } = this.state.serviceRequest;

return (
  <div>
  <HomeTemplate 
  handleShow = {this.handleShow}
  handleClose = {this.handleClose}
  name = {name}
  email ={email}
  mobileNumber = {mobileNumber}
  DateFnsUtils ={DateFnsUtils}
  handleDateChange ={this.handleDateChange}
  handleChange = {this.handleChange}
   /> 
 </div>
  );

}

В дочернем компоненте у меня есть текстовое поле, подобное этому. из-за невозможности опубликовать весь код, я публикую часть кода, которая полезна для решения проблемы. Я также буду публиковать ссылку на вставку в комментарии. 

 <TextField
            autoFocus
            margin="dense"
            id="emailId"
            label="Email Address"
            type="email"
            value= {props.email}
            fullWidth
          />

Пожалуйста, предложите мне, как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 14 марта 2019

То, чего вы хотите добиться - это общая потребность, которую требует разработчик при создании приложения с использованием реагирования.

Вы хотите, чтобы дочерний компонент отражал изменяющиеся данные при вызове события onChange.

Обратите внимание, что дочерний компонент может иметь свое собственное состояние, но если есть несколько компонентов, которые должны отражать одни и те же изменяющиеся данные, вы можете поднять состояние до до ближайшего предка ,

@ mehamasun уже показал, как это сделать, на своем примере.

Родитель (состояние) -> Дочерний элемент (реквизиты) -> // Вызванное событие -> Родитель (состояние изменено с помощью обработчика событий) -> Переопределить дочерний элемент (реквизиты)

1 голос
/ 14 марта 2019

Вы можете отправить функцию Parent как prop для Child и установить ее как onChange prop of TextField.

Например, допустим, ваш дочерний компонент выглядит следующим образом: 

function Demo(props) {
  return (
    <TextField
      fullWidth
      id="standard-name"
      label="Name"
      value={props.name}              // it gets value from prop
      onChange={props.onNameChange}   // it gets handler function from prop too!
      margin="normal"
    />
  );
}

Теперь ваш родительский компонент отвечает за отправку props.name и props.onNameChange: 

class App extends React.Component {
  state = {
    name: "Sleepy cat"
  };

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

  render() {
    return (
        <Demo 
          onNameChange={this.handleNameChange}  // send a function as prop, that will change the state in parent
          name={this.state.name}                // send the state of parent to child
        />
    );
  }
}

Вот полная демонстрация: 

const {TextField} = window['material-ui'];

function Demo(props) {
  return (
    <TextField
      fullWidth
      id="standard-name"
      label="Name"
      value={props.name}
      onChange={props.onNameChange}
      margin="normal"
    />
  );
}

class App extends React.Component {
  state = {
    name: "Sleepy cat"
  };

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

  render() {
    return (
      <div>
        <code>{"Parent State: " + JSON.stringify(this.state)}</code>
        <Demo onNameChange={this.handleNameChange} name={this.state.name} />
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@3.9.2/umd/material-ui.production.min.js"></script>

<div id="root"></div>
...