材质ui文本字段中的倾斜类型反应

如何解决材质ui文本字段中的倾斜类型反应

我的react应用程序中有一个简单的登录对话框，其代码为- 我正在Modal组件中调用此函数。

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

解决方法

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一个codesanfbox示例。编辑您的值并尝试重新加载页面：您将看到来自sessionStorage的先前数据。