Question

当我阅读ReactJS文档时，建议使用状态来创建受控组件。但是，下面不受控制的代码更加简洁，并且可以完美运行。我可以理解为什么父组件应该使用状态，但是下面的代码是如此简洁，以至于我不明白为什么建议使用受控组件。 “ MyModule”前缀是可选的，我什至不必包括它。

module MyModule {
   export let userName: string = "";

   interface iProps {
      userName?: string;
   }

   export class Build extends React.Component<iProps, {}> {
      constructor(props: iProps) {
         super(props);

         if (props.userName) {
            MyModule.userName = props.userName;
         }
      }

      handleChange(event) {
         MyModule.userName = event.target.value;
      }

      render() {
         return (<input type="text" defaultValue={MyModule.userName} onChange={this.handleChange.bind(this)} /> );
      }
   } //end class.
} //end module.

Answer 1

之所以起作用，是因为handleChange(event)正在更新的值存储在组件类外部。

因此，当整个应用程序中只有一个Build组件实例时，它基本上可以工作。当您拥有同一组件的多个实例时，您可能要确保每个实例都有自己的userName值。您可以创建多个变量，并以某种方式将每个变量与每个组件实例相关联，但是使用组件状态或诸如redux之类的应用程序范围的状态存储是实现此目的的更好方法。

Answer 2

由于不受控制，输入将显示正确的值。但是所有的同一页面上的js实例将具有相同的用户名。另外，您将失去javascript的“反应性”部分。例如。如果您在输入中添加标签，该标签会在输入框中显示用户名，则更改后不会更新。

为什么这个不受控制的组件在不使用State的情况下如此完美地工作

2 个答案: