无法输入 material 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

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

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

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

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
    });
  };

最后渲染函数到 show/edit 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一个codesanfbox例子。编辑您的值并尝试重新加载页面：您将看到以前的数据来自 sessionStorage.

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

Cant type in material ui Textfield (react)

edit

textfield

reactjs

material-ui