无法输入材料ui文本字段（反应）

Question

我的 react 应用中有一个简单的登录对话框，其代码如下： 我在模态组件中调用这个函数。

import Jenkins_logo from "images/Jenkins_logo.svg";
import Typography from "@material-ui/core/Typography";
import TextField from '@material-ui/core/TextField';

export default function JenkinsLogin(props) {

    console.log("in login " )
    console.log(props)

    var jenkinsUsername = sessionStorage.getItem("jenkins-Username");
    var jenkinsPassword = sessionStorage.getItem("jenkins-Password");

    const handleChangeUsername = (props) => {
        sessionStorage.setItem("jenkins-Username", props.target.value);

    };
    const handleChangePassword = (props) => {
        sessionStorage.setItem("jenkins-Password", props.target.value);
    };
   
return (
            <div className="jenkins_paper" >
                    <img src={Jenkins_logo} className="jenkins_img" />
                <Typography component="h1" variant="h5">
                    Sign in
              </Typography>
                    <TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        id="Username"
                        label="Username "
                        name="Username"
                        autoComplete="Username"
                        defaultValue={jenkinsUsername}
                        autoFocus
                        onChange={handleChangeUsername}
                    />
                    <TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        name="password"
                        label="Password"
                        type="password"
                        defaultValue={jenkinsPassword}
                        id="password"
                        autoComplete="current-password"
                        onChange={handleChangePassword}
                    />
            
        </div>
    )
}

但它不允许我编辑，它有点灰显，不会让我点击它。下图显示。 谁能帮忙解决我做错了什么。

cannot edit image

Answer 1

Ciao，你的代码有一些问题。让我更好地解释我的意思。

当你使用 reactjs 时，总是不鼓励直接在组件体中编写行代码。更好的使用reactjs提供的功能。

例如，如果你想在 reactjs 组件中管理 var，最好使用组件 state，通过在组件 constructor 中定义它，如下所示：

constructor(props) {
    super(props);
    this.state = {
      jenkinsUsername: "",
      jenkinsPassword: ""
    };
    console.log("in login ");
    console.log(props);
  }

现在，假设您要从之前编辑的 sessionStorage jenkinsUsername 和 jenkinsPassword 加载。您可以通过这种方式使用 reactjs 在组件加载时触发一次的函数：componentDidMount：

componentDidMount() {
    this.setState({
      jenkinsUsername: sessionStorage.getItem("jenkins-Username"),
      jenkinsPassword: sessionStorage.getItem("jenkins-Password")
    });
  }

注意： this.setState是reactjs提供的另一个函数，用来设置我们之前定义的state。

现在让我们定义 2 个处理程序来设置 jenkinsUsername 和 jenkinsPassword 状态并在 sessionStorage 中保存新值。

  handleChangeUsername = (props) => {
    sessionStorage.setItem("jenkins-Username", props.target.value);
    this.setState({
      jenkinsUsername: props.target.value
    });
  };
  handleChangePassword = (props) => {
    sessionStorage.setItem("jenkins-Password", props.target.value);
    this.setState({
      jenkinsPassword: props.target.value
    });
  };

最后是显示/编辑jenkinsUsername和jenkinsPassword的渲染函数：

render() {
    return (
      <div className="jenkins_paper">
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <TextField
          variant="outlined"
          margin="normal"
          required
          fullWidth
          id="Username"
          label="Username "
          name="Username"
          autoComplete="Username"
          defaultValue={this.state.jenkinsUsername}
          value={this.state.jenkinsUsername}  //current value for TextBox
          autoFocus
          onChange={this.handleChangeUsername} //handle to manage TextField value (note the **this**)
        />
        <TextField
          variant="outlined"
          margin="normal"
          required
          fullWidth
          name="password"
          label="Password"
          type="password"
          defaultValue={this.state.jenkinsPassword}
          value={this.state.jenkinsPassword}
          id="password"
          autoComplete="current-password"
          onChange={this.handleChangePassword}
        />
      </div>
    );
  }

这是使用 reactjs 的正确方法。

Here 一个代码框示例。编辑您的值并尝试重新加载页面：您将看到来自sessionStorage 的先前数据。