React+typescript：如果我把它作为一个数组来改变状态？答案

【问题标题】：React+typescript : How to change the state if I take it in as an array?React+typescript：如果我把它作为一个数组来改变状态？
【发布时间】：2020-05-22 18:07:44
【问题描述】：

这是我正在使用的模态表单的代码，我想将我的函数用于 console.log，但我不确定如何更改 this.set.state 中的状态？任何帮助表示赞赏，因为我很新反应。变量st就是每次传入的字符串

interface State {
  name: string;
  email: string;
  amt: string;
}

interface Props {
  isOpen: boolean;
  handleClose: () => void;
  handleSendRequest: (values: State) => void;
}

    export default class FormDialog extends React.Component<Props, State> {
      state = { name: "", email: "", amt: "" };

      onChange = ((st: string) => (event: any) => {
        const newObject: any = {};
        newObject[st] = event.target.value;
        this.setState({ State: newObject[st] }); //this part im struggling with
      }).bind(this);

      render() {
        const { isOpen, handleClose, handleSendRequest } = this.props;
        return (
          <Dialog
            open={isOpen}
            onClose={handleClose}
            aria-labelledby="form-dialog-title"
          >
            <DialogTitle id="form-dialog-title">Send Money Request</DialogTitle>
            <DialogContent>
              <TextField
                autoFocus
                margin="dense"
                id="standard-read-only-input"
                name="name"
                label="Contact Name"
                defaultValue="John"
                onChange={this.onChange("name")}
              />

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

CodeSandbox example

您可以投射newObject，如下所示。这个答案来自这个Stack Overflow answer。

onChange = (st: string) => (event: any) => {
  const newObject = { [st]: event.target.value } as Pick<State, keyof State>;
  this.setState(newObject);
};

编辑：

回应： [H]它为什么不适用于文本字段中的默认值？如果我关闭默认标签并输入一个新值，它仍然有效

这是因为您输入的defaultValue 是硬编码的。您的组件不知道您在输入中定义的值。您必须将默认值移动到您的状态，并将该值提供给 <TextField /> 组件。

export default class FormDialog extends React.Component<Props, State> {
  state = {
    name: "John", // Define the default value here
    email: "",
    amt: "",
  };

  onChange = (st: string) => (event: any) => {
    const newObject = { [st]: event.target.value } as Pick<State, keyof State>;
    this.setState(newObject);
  };

  render() {
    return (
      <TextField
        defaultValue={this.state.name} // Pass the default value as a prop here
        onChange={this.onChange("name")}
      />
    );
  }
}

【讨论】：

谢谢！快速，但问题是，它为什么不适用于文本字段中的默认值？如果我关闭默认标签并输入一个新值，它会起作用
对不起，我不明白你在问什么。您能否澄清“文本字段中的默认值” 是什么意思？默认情况下，你指的是this.onChange("name")中的"name"吗？
在我发布的代码中，我有文本字段：具有默认值 John。如果我现在按提交，我不会在控制台中看到 John。但是，如果我将 John 作为默认值删除并手动键入然后按提交，我可以在控制台中看到它
我更新了我的答案和 CodeSandbox 来解决您的问题。
谢谢你的回答，对我帮助很大！

【解决方案2】：

这里是一个简单的javascript例子，它会记录状态改变后的状态。

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {

    this.setState({
      name: event.target.value
    }, () => console.log(this.state));
  }
  render() {
    return <div > < input type = "text"
    id = "name"
    onChange = {
      this.handleChange
    }
    /></div > ;
  }
}

ReactDOM.render( <
  Hello / > ,
  document.getElementById('container')
);

<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>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

【讨论】：