Question

因此，在使用实质性UI之前，我的代码是这样的。为了实现ToDo应用程序的编辑功能，我使用了来自textarea的ref来获取当前（默认）值，然后将更新后的值保存在save（）方法中（不用担心editItem方法，它位于另一个组件中，我相信无需发布他，因为问题不存在

import React, {Component} from 'react';
import './ToDoItem.css';
import EditButton from './EditButton';
import DeleteButton from './DeleteButton';
import SaveButton from './SaveButton';
import EditToDoField from './EditToDoField';

class ToDoItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editMode: false,
        }
      };

      edit = () => {
        this.setState ({editMode: true});
      };

      save = () => {
        let updToDo = this.refs.newToDo.value;
        this.props.editItem (updToDo);

        this.setState ({
          editMode: false})
      };

      renderNormal = () => {
        return (
            <div className="ToDoItem">
            <p className="ToDoItem-Text">{this.props.todo}</p>
            <EditButton editHandler={this.edit} />
        </div>
        );
      };

      renderEdit = () => {
        return (
          <div className="ToDoItem">
            <textarea ref="newToDo" defaultValue={this.props.todo}></textarea>
            <SaveButton saveHandler={this.save} /> 
          </div>
        );
      };

      render() {
        if (this.state.editMode) {
          return this.renderEdit ();
        } else {
          return this.renderNormal ();
        }
      }
}

export default ToDoItem;

因此，现在我试图从材质UI中实现漂亮的TextField，删除了texarea标签，这是代码的相应附加内容：

<EditToDoField 
                ref="newToDo"
                defaultToDoValue={this.props.todo} 
            />

和EditToDoField组件：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: "61px",
  },
});

class OutlinedTextFields extends React.Component {

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-editToDO"
          label="Edit ToDo"
          defaultValue={this.props.defaultToDoValue}
          className={classes.textField}
          multiline
          margin="normal"
          variant="outlined"
        />
      </form>
    );
  }
}

OutlinedTextFields.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(OutlinedTextFields);

因此，我将当前（默认）值传递给EditToDoField，但是当我尝试保存更新的ToDo文本时，结果中出现空字段。我了解到，很可能我只是错过了一些东西，但仍然不知道得到什么。我也尝试使用“ innerRef”和“ inputRef”代替“ ref”，但是没有运气。你能帮我这个东西吗？

Answer 1

在用户输入文本时添加一个简单的事件处理程序，然后可以使用回调将输入从文本字段移至所需的任何组件，这是完整的example

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: '61px'
  }
});

class OutlinedTextFields extends React.Component {
  handleOnChange = event => {
    console.log('Click');
    console.log(event.target.value);
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-editToDO"
          label="Edit ToDo"
          defaultValue={this.props.defaultToDoValue}
          className={classes.textField}
          multiline
          margin="normal"
          variant="outlined"
          onChange={this.handleOnChange}
        />
      </form>
    );
  }
}

OutlinedTextFields.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(OutlinedTextFields);

如何从Material UI获取TextField的输入值？

1 个答案: