单击按钮时按顺序从文本字段中获取值？

Question

我有一个UI如下：

这些字段来自 API 呼叫响应。来自 API 响应的字段数可能会有所不同。我使用如下列表实现它：

 private _onRenderCell = (field): JSX.Element => {

    return (
        <div>
            <div>
                {field["fieldName"]}
                <br/>                
                {
                    <TextField
                        onChanged={this.onTextChanged}
                    />
                }
                <br/>
            </div>
        </div>
    );
}

public render(): JSX.Element {
    const result: JSX.Element = (
        <FocusZone direction={FocusZoneDirection.vertical}>
            <List
                items={this.props.fields}
                onRenderCell={this._onRenderCell}
            />
        </FocusZone>
    );        

    return (
        <div>              
            {result}
        </div>
    );
}

单击“确定”按钮后，如何按顺序从文本框中获取值，以便 textbox1 的值为 Name，textbox2 的值为 Age，textbox3 的值为 Gender？

Answer 1

https://codepen.io/vitalius1/pen/OroprE 也许这会有所帮助。考虑到 TextFields 的数量是未知的，我相信这应该会给您一个良好的开端。如果这对你有用，请随时关闭问题。感谢您使用 Fabric，很抱歉这么久没有回复。

class Content extends React.Component {
  private textFieldRefs: IRefObject<ITextField>[] = [];
  constructor() {
    super(); 

    this.state = {
      inputValues: []
    }
  }

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

    return (
      <Fabric className='foo'>
        <List
          items={_items}
          onRenderCell={this._onRenderCell}
        />  
        <DefaultButton
          type="submit"
          onClick={this._onClick}
        >
          Click here
        </DefaultButton>
        {inputValues.map((ref, index) => (
          <div key={index}>{ref}</div>
        ))}
      </Fabric>
   );
 }

  private _onRenderCell = (item) => {
    const ref = React.createRef<ITextField>();
    this.textFieldRefs.push(ref);

    return (
      <div>
        {item.name}
        <br/>                
        <TextField componentRef={ref}/>
        <br/>
      </div>
    );
  }

  private _onClick = () => {
    const {inputValues} = this.state;
    const newValues = [];

    this.textFieldRefs.forEach((ref) => {
      console.log(ref.current.value);
      newValues.push(ref.current.value);
    })

    this.setState({
      inputValues: newValues.concat(inputValues)
    })
  }
}

单击按钮时按顺序从文本字段中获取值？

Fetch values from textfields in order on button click?

reactjs

office-ui-fabric