Блог

Я хочу создать компонент настройки. мы используем material-ui в react.

 import React, {Component} from 'react';    
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

export default class MyTextField extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: ''
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.value) {          
      this.setState({data: nextProps.value})
    }
  }

  handleChange = (event) => {
    this.setState({data: event.target.value});
    this.props.onChange(event.target.value);
  }

  render() {

    return (<Grid container={true} spacing={1}>
      <TextField label={this.props.title} required= 
          {this.props.required} value={this.state.data} onChange={this.handleChange}/>
     </Grid>)
  }
 

с помощью этого кода используйте MyTextFiled :

 import React, {Component} from 'react';    
import MyTextField from '../../components/textField';

export default class add extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'this is init value'
    }
  }

  handleTitleChange(event) {
    if (event) {
      let val = event.target.value
      this.setState({title: val});
    }
  };

  render() {
    return (<div>
      <MyTextField value={this.state.title} onChange={this.handleTitleChange.bind(this)}/>
    </div>)
  }
}
 

Но значение «это значение инициализации» не отображается в myTextField.
Если я введу новое значение, оно будет отображаться…
Эта проблема возникает не тогда, когда я использую «ввод», а возникает только при использовании материала «Текстовое поле».

Проблема была решена

 if (props amp;amp; props.value){
  this.state = {
    data: props.value
  }
}
 

добавьте приведенный выше код в конструктор 🙂