Question

我正在使用react-redux创建我的编辑表单。到目前为止，我可以获取我想要更改的项目的数据，但我不知道如何预先填充输入值，并且能够更改它。因为当我尝试在输入中粘贴某些内容时，文本不会改变。

那么，我如何预先填充输入值，并能够将其录入其中。

import React from 'react';
import PropTypes from 'prop-types';


class EditTodoComponent extends React.Component {

    state = {
        text: this.props.todo.text
    }

    onChange(e) {
        this.setState({ text: e.target.value });
    }

    render() {
        return(
            <div>
                <form>
                    <input type="text" value={this.state.text} onChange={this.onChange}/>
                </form>
            </div>
        );
    }
}


EditTodoComponent.propTypes = {
    todo: PropTypes.shape({
        id: PropTypes.number.isRequired,
        completed: PropTypes.bool.isRequired,
        text: PropTypes.string.isRequired
    }).isRequired,
    visible: PropTypes.bool.isRequired
  }

export default EditTodoComponent

Answer 1

试试这个

import React from 'react';
import PropTypes from 'prop-types';

class EditTodoComponent extends React.Component {
    constructor() {
        super();
        this.state = {
          text: this.props.todo.text
    }   
    this.defaultText = "default string";
  }

  onChange(e) {
      this.setState({ text: e.target.value });
  }

  render() {
      return(
          <div>
              <form>
                  <input 
                      type="text" 
                      value= {this.state.text 
                          ? this.defaultText 
                          : this.state.text 
                      } 
                      onChange={this.onChange}/>
              </form>
          </div>
      );
  }
}

EditTodoComponent.propTypes = {
    todo: PropTypes.shape({
        id: PropTypes.number.isRequired,
        completed: PropTypes.bool.isRequired,
        text: PropTypes.string.isRequired
    }).isRequired,
    visible: PropTypes.bool.isRequired
  }

export default EditTodoComponent

检查this.state.text值，如果它为空，则改为使用defaultValue。

Answer 2

试试这个：

import React from 'react';
import PropTypes from 'prop-types';
class EditTodoComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            text: this.props.todo.text
        };
        this.defaultText = "default string";
    }

    onChange(e) {
        this.setState({ text: e.target.value });
    }

    render() {
        return(
            <div>
                <form>
                    <input type="text" value={this.state.text || this.defaultText} onChange={(e) => this.onChange(e)}/>
                </form>
            </div>
        );
    }
}

您错过了构造函数定义并且onChange被错误绑定，因此this不是组件本身

如何使用react和redux更改表单中的输入值？

2 个答案: