Question

我有一个引导程序模式，用户应在其中编辑他在表中输入的内容。当我使用静态getDerivedStateFromProps设置状态时，用户无法修改输入框，但是当我使用一些任意数据手动初始化状态时，用户可以对其进行修改。我究竟做错了什么？

该组件正在从redux获取其道具。

export default class EditItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: ""

    };
  }

  handleChange = (event) => {
    let { value, name } = event.target;
    this.setState({
       [name]: value
    })
  }


  static getDerivedStateFromProps(nextProps, prevState){
    return {
      name: nextProps.itemDetails.name
    }
  }

  render() {
    let {

    } = this.state;
    let {itemDetails} = this.props
    return (
      <div id="myModal3" className="modal fade">
        <div id={uuidv1()} className="modal-dialog">
          <div id={uuidv1()} className="modal-content">

            <div id={uuidv1()} className="modal-body">
              <form id={uuidv1()} className="form-horizontal form-material">
                {this.props.cat_name}
                <div id={uuidv1()} className="form-group">
                  <label id={uuidv1()} className="col-md-8">
                    Item Name
                  </label>
                  <div id={uuidv1()} className="col-md-8">
                    <input
                      id={uuidv1()}
                      onChange={this.handleChange}
                      value={this.state.name}
                      name="name"
                      type="text"
                      placeholder="ex. Burrito"
                      className="form-control form-control-line"
                    />
                  </div>

                </div>



              </form>
            </div>

          </div>
        </div>
      </div>
    );
  }
}

Answer 1

使用getDrivesStateToProps并不是这样的好选择。您有一个道具，为什么不直接使用它呢？您可以look here获得更多说明。

将您的初始状态设置为道具：

class App extends React.Component {
  constructor( props ) {
    super( props );

    this.state = {
      name: this.props.itemDetails.name,
    };
  }

  handleChange = ( event ) => {
    const { value, name } = event.target;
    this.setState( {
      [ name ]: value,
    } );
  };

  render() {
    let { } = this.state;
    const { itemDetails } = this.props;
    console.log( this.state );
    return (
      <div>
        <div>
          <div>
            <div>
              <form>
                {this.props.cat_name}
                <div>
                  <label>Item Name</label>
                  <div>
                    <input
                      onChange={this.handleChange}
                      value={this.state.name}
                      name="name"
                      type="text"
                      placeholder="ex. Burrito"
                      className="form-control form-control-line"
                    />
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const itemDetails = { name: "foo" };

ReactDOM.render(<App itemDetails={itemDetails}/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

如果您的道具来自异步操作，我不知道您是否可以使用像这样的东西只是为了安全起见：

this.state = {
      name: ( this.props.itemDetails && this.props.itemDetails.name ) || "",
};

也许有更好的方法（°_o）/¯

使用默认值编辑反应播种中的输入字段

1 个答案: