该形式不使用React JS和材料UI工作

Question

我是React JS和材料UI的新手。如果我在文本字段中键入某些内容，则它捕获值(调试和检查(，但不显示形式。

请看一下代码。我得到的表单值和错误也很完美，但看不到页面上的值。

有些事情停下来看看我在文本字段上键入的内容。

class Header extends React.Component{
    constructor(props) {
      super(props);
        this.state={
            projectName: '',
            projectNameError :'',
            description: '',
            descriptionError:'',
            module: '',
            moduleError:'',
            AssetValue:'',
            AssetValueError:''
        }
    }
    change (event){
        this.setState({
            [event.target.name]: event.target.value
        });
    };
 validate = () => {
    let isError = false;
    const errors = {
        AssetValueError :'',
        descriptionError :'',
        projectNameError : '',
        descriptionError :'',
        moduleError : ''
    };
    if(this.state.projectName.length < 5){
        isError = 'true';
        errors.projectNameError = "projectName is mandatory";
    }
    if(this.state.description.length < 5){
        isError = 'true';
        errors.descriptionError = "description is mandatory";
    }
    if(isError){
        this.setState({
            ...this.state,
            ...errors
        });
    }
    return isError; 
  } 
    onSubmit (evnt){
        evnt.preventDefault();
        const error = this.validate();
        console.log("the values are",this.state);
        if(!error){
                this.setState({
                    projectName: '',
                    projectNameError :'',
                    description: '',
                    descriptionError:'',
                    module: '',
                    moduleError:'',
                    AssetValue:'',
                    AssetValueError:'',
                })
            }
    };
    render(){
        return (
              <div className = "container">
              <form>
                    <div className="form-group">
                      <label>Project Name:</label>
                      <MuiThemeProvider muiTheme={muiTheme}>
                      <TextField 
                            name="projectName" hintText="projectName" floatingLabelText="projectName"
                            errorText={this.state.projectNameError}
                            value ={this.state.projectName}
                            onChange={event => this.change(event)} floatingLabelFixed />
                        </MuiThemeProvider>
                    </div>
                <div className="form-group">
                  <label>Description:</label>
                  <MuiThemeProvider muiTheme={muiTheme}>
                  <TextField
                            name="description" hintText="description" floatingLabelText="description"
                            errorText={this.state.descriptionError}
                            value ={this.state.description} 
                            onChange={event => this.change(event)} floatingLabelFixed />
                    </MuiThemeProvider>
                </div>
                <div className="form-group">
                  <label>Module:</label>
                  <MuiThemeProvider muiTheme={muiTheme}>
                  <TextField 
                        name="module" 
                        className="form-control" 
                        placeholder="Module" 
                        errorText={this.state.moduleError} 
                        value ={this.state.module}
                        onChange={event => this.change(event)}/>
                </MuiThemeProvider>
                </div>
                <div className="form-group">
                <label>Choose Asset Name:</label>
                    <select name="AssetValue" onChange={event => this.change(event)}>
                        <option value="">Select</option>
                        <option value="BMI">BMI</option>
                        <option value="GYPSY">GYPSY</option>
                        <option value="PRS">PRS</option>
                     </select>
                </div>
                <button onClick={(evnt) => this.onSubmit(evnt)}>Submit</button>

                <div>
                    <button onClick={(event) => this._onButtonClick(event)}>Button</button>
                        {this.state.showComponent ?<NewComponent /> : null}
                </div>
              </form>
             </div>
        );
    }
}
export default Header;

Answer 1

我从您的代码中发现了小错误。

您正在根据目标的名称更新状态。

  change (event){
    this.setState({
        [event.target.name]: event.target.value
    });
  };

但是您的"真实"输入字段不是" textfield"，没有名称为prop。

实际上Textfield只是实际输入字段的样式包装器。

您可以通过打开Chrome React Dev工具进行检查。

因此，为了根据名称更新您的值，您应该将" InputProps"传递给Textfield组件。

我建议您先阅读此文档。

textfield api