Установить значение TextField для дочернего компонента в выпадающий список родительских компонентов? - PullRequest
Новая
       10

Установить значение TextField для дочернего компонента в выпадающий список родительских компонентов?

1 голос
/ 05 апреля 2020

В следующих двух кодах есть дочерний и родительский компоненты. Дочерний компонент имеет TextField, а родительский компонент имеет Dropdown. Есть ли способ, которым я могу установить значение TextField на любое значение, на которое я изменю Parent Dropdown? Например, если я выбрал «Средний», я хочу изменить значение TextField дочернего компонента на «Средний». Возможно ли это?

Вот дочерний компонент 

import * as React from "react";
import { TextField } from 'office-ui-fabric-react/lib/';
const ChildComponent = (props) => {
    return( 
          <TextField
              label="Description" required
              key="descriptionKey"
              styles={props.styles}
              value={props.value} 
              multiline={props.multiline}
              onChange={props.onChange}
              defaultValue={props.defaultValue}
              placeholder={props.placeholder}
            />
    );
}
export default ChildComponent;

Вот родительский компонент 

import * as React from "react";
import ChildComponent from './ListItem';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/';

class ParentComponent extends React.Component {
    handleChange = (event) => {
        this.setState({
            operationType: event.target.value,
        })
    };
render(){
    const riskAssess: IDropdownOption[] = [
        { key: 'high', text: 'High' },
        { key: 'medium', text: 'Medium' },
        { key: 'low', text: 'Low' },
      ]
    return(
    <div>
        <Dropdown
          label="Risk Assessment" required
          ariaLabel="Risk"
          styles={{ dropdown: { width: 125 } }}
          options={riskAssess}
          onChange={this._onChange}
        />
        <ChildComponent value="This is what I want to change to Dropdown value" />
    </div>
      );
   }
   private _onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    this.setState({operationType: item.text})
    console.log(event);
  };
}
export default ParentComponent;

1 Ответ

1 голос
/ 05 апреля 2020

Да! Заменить "This is what I want to change to Dropdown value" на {this.state.operationType}. Фигурные скобки сообщают JSX, что вы хотите, чтобы переменная заполняла это значение.

С помощью TypeScript ваши компоненты должны определять свои свойства и структуры состояний, добавляя обобщенные аргументы c в React.Component: 

interface ParentProps = {};

interface ParentState = {
  operationType: string;
};

class ParentComponent extends React.Component<ParentProps, ParentState> {

Для ChildComponent вы захотите расширить React.F C (сокращение от FunctionalComponent) аналогичным образом. Поскольку он не определяет никакого состояния, он может предвидеть go второй аргумент generi c: 

interface ChildProps {
  styles?: React.CSSProperties;
  value?: string;
  multiline?: boolean;
  onChange?: React.ChangeEventHandler<HTMLInputElement>
  defaultValue?: string;
  placeholder?: string;
};

const ChildComponent: React.FC<ChildProps> = (props) => {

Теперь TypeScript знает, чего ожидать.

Точные определения интерфейса TypeScript гарантируют что каждый компонент получает только то, что позволяет. Он заменяет предупреждения React's PropTypes принудительными ошибками компиляции. Все сложнее, нужно все это определить, но это делает разработку менее подверженной ошибкам.

...