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

Question

我有两个 React 组件，父组件和子组件。我正在将一个道具传递给子组件，我想使用该道具在 select 输入上设置默认值。但是，如果属性发生变化，我希望 select 默认值也发生变化。

当我在 select 中设置默认值时，我可以选择属于 select 或者的选项之一。如果我改用值，'default' 会随着属性更新而改变，但我不能 select 任何选项。

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

我在引用：

The difference between the defaultValue and value property, is that defaultValue contains the default value, while value contains the current value after some changes have been made. If there are no changes, defaultValue and value is the same.

The defaultValue property is useful when you want to find out whether the contents of a text field have been changed.

这实际上意味着如果你输入 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 is selected value while very first time loading and value is selected value every time to change option value

Answer 3

当您没有 onChange 处理程序时，您需要将您的值设置为 defaultValue，但是当您有 onChange 处理程序时，您需要将值设置为 value。

你可以做到，

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 有什么区别？

What are the differences between defaultValue and value in select?

html-select

reactjs