将子组件文本字段的值设置为父组件下拉选择？

Question

在下面两段代码中，有一个子组件和一个父组件。子组件有一个 TextField，父组件有 Dropdown，有没有办法可以将 TextField 的值设置为我将 Parent Dropdown 更改为的值？例如，如果我选择了 "Medium"，我想将子组件 TextField 的值更改为 "Medium"。这可能吗？

这是子组件

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;

Answer 1

是的！将 "This is what I want to change to Dropdown value" 替换为 {this.state.operationType}。花括号告诉 JSX 你想要一个变量来填充那个值。

使用 TypeScript，您的组件需要通过向 React.Component 添加通用参数来定义它们的属性和状态结构：

interface ParentProps = {};

interface ParentState = {
  operationType: string;
};

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

对于 ChildComponent，您希望以类似的方式扩展 React.FC（FunctionalComponent 的缩写）。由于它没有定义任何状态，它可以放弃第二个通用参数：

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 的 PropTypes 警告。它更复杂，必须定义所有这些，但它使得开发更不容易出错。

将子组件文本字段的值设置为父组件下拉选择？

Set Child Component TextField's Value to Parent Components Dropdown Selection?

javascript

parent-child

typescript

reactjs

tsx