Question

我有两个反应成分，父母和孩子。我正在将一个prop传递给子组件，并且我想使用该prop在select输入上设置defaultValue。但是，如果该属性发生变化，我希望选择默认值也发生变化。

当我在select中设置默认值时，可以选择属于该选择器的选项之一。如果我改用value，则“ default”会随着属性的更新而变化，但我无法选择任何选项。

class Selector extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
       <select defaultValue={this.props.value}>
         <option>1</option>
         <option>2</option>
       </select>
    )
  }
}

我想更改值，并且我意识到即使prop已更改，它也不会重新渲染。我正在寻找解决方法。

Answer 1

我正在引用：

defaultValue和value属性之间的区别在于   defaultValue包含默认值，而value包含   进行一些更改后的当前值。如果没有   更改，defaultValue和value相同。

当您要查找是否要使用defaultValue属性时，此属性很有用   文本字段的内容已更改。

这实际上意味着，如果您输入 defaultValue ，此值将被初始化为输入，就这样，您可以更改值，文本也将更改。

但是，如果您输入 value ，则需要首先更改赋予输入的值，以便更改输入文本。

看看这个例子，它们都使用相同的状态，但是行为不同。

// Example class component
class Thingy extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = { value: 'test' }
  }
  
  onChange(e) {
    this.setState({ value: e.target.value });
  }
  
  render() {
    return (
      <div>
        <div><b>default value</b> (you can edit without changing this.state.value)</div>
        <input defaultValue={this.state.value}></input>
        
        <div><b>value</b> (you can't edit because it does not change this.state.value)</div>
        <input value={this.state.value}></input>

        <div><b>value</b> (you can edit because it has onChange method attached that changes this.state.value) <br /> <b>NOTE:</b> this will also change second input since it has attached the same state with <b>value</b> property, but won't change first input becase same state was attached as <b>defaultValue</b></div>
        <input value={this.state.value} onChange={e => this.onChange(e)}></input>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy />,
  document.body
);

div > div {
  font-size: 16px;
}

input + div {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<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>

Answer 2

defaultValue是首次加载时的选定值和每次更改选项值时都会选择该值

Answer 3

当您没有onChange处理程序时，您需要将值设为defaultValue，但是当您拥有value处理程序时，则需要在onChange中输入值。

您可以这样做

class Selector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: props.value
    }
  }
  change = (event) =>{
     this.setState({selected: event.target.value});
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.selected !== this.props.value) {
      this.setState({selected: this.props.value})
    }
  }
  render() {
    return (
       <select value={this.state.selected} onChange={this.change}>
         <option>1</option>
         <option>2</option>
       </select>
    )
  }
}

select中的defaultValue和value有什么区别？

3 个答案: