Question

我有一个组件Slider，它只包含<div>作为某个参数的标题，以及一个输入滑块来控制其值。它需要标题的道具和该属性的当前值来初始化滑块旋钮的位置。我已阅读有关React controlled components的内容，虽然我认为我理解了基本概念，但我无法将此输入滑块初始化为this.props.initialValue。如果我尝试使用<input>给<input defaultValue={this.props.initialValue}...一个默认值，我会得到：

bundle.js：357警告：Slider包含带有value和defaultValue道具的类型范围的输入。输入元素必须是受控的或不受控制的（指定值prop或defaultValue prop，但不能同时指定两者）。决定使用受控或不受控制的输入元素并删除其中一个道具。更多信息：链接

首先让我阅读有关controlled components的内容。我想我理解defaultValue如何与input元素存储状态本身相关联，这是受控组件完全不的。

那么我的问题是如何将滑块初始化为一个值？谷歌搜索显示很少，除了有以下内容：<input value={this.state.value}...然后，在我的构造函数中，我正在初始化state.value到this.props.initialValue，我认为组件的第一个渲染会给我一个具有该值的滑块。但事实并非如此。

这是我当前的组件代码：

class Slider extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            value: props.initialValue
        } 
        this.sliderChanged = this.sliderChanged.bind(this)
    }

    sliderChanged(e) {
        this.setState( { value: e.target.value} );
        this.props.valueChanged(e.target.value)
    }

    render() {

        const containerStyle = {
            display: "grid",
            gridTemplateRows: "2fr 3fr",
            textAlign: "center",
        }

        const titleStyle = {
            backgroundColor: "purple",
            color: "white",
            textAlign: "center",
        }

        const sliderStyle = {
            backgroundColor: "orange",
        }

        console.log(this.state)


        return (
            <div style={containerStyle}>
            <div style={titleStyle}>{this.props.title}</div>
            <div style={sliderStyle}>
            <input 
            type="range" 
            value={this.state.value} 
            onChange={this.sliderChanged} />
            </div>
            </div>
            )
    }
}

Answer 1

React blog recommends 使用 key 道具强制输入重新渲染，因此您可以使用新道具重新初始化状态。

<Slider key={initialValue}/>

试图让React控制的输入具有默认值

1 个答案: