我需要渲染两个单独的
input[type="range]
,每个都有一个单独的 output
值。
我创建了一组组件,它们上下传递数据以便以正确的方式呈现。
但我无法拆分两个组件的渲染,我需要声明哪个
state
受到影响,我想将其存储在变量中并在不同情况下传递它。
这是我正在做的事情的代码笔:
http://codepen.io/wanbinkimoon/pen/NpEpre?editors=0011
以下是我认为错误的台词:
handleChange() {
let v = props.t;
this.setState({
v: event.target.value
});
这是一个引用
<Range />
实例的函数,声明如下:
<Range
name = 'X Value'
t = {'xvalue'}
value = {this.state.xvalue}
change = {this.handleChange}
/>
我尝试传递一些参数,但返回错误。
从父组件传递一个唯一的属性,例如:名称,并将该名称分配给
input
字段,尝试使用与 state
变量名称相同的名称。
像这样:
<input
type="range"
min={min}
max={max}
step={step}
name={this.props.name} //assigning name
value={this.props.value}
onChange={(e)=>this.props.change(e)}
/>
将
event
对象传递给父组件。使用这个 event
来更新状态值。像这样:
handleChange(e) {
//let v = props.t;
let obj = {};
obj[e.target.name] = e.target.value;
this.setState(obj);
console.log(event.target.value);
};
它起作用的原因:
State 是任何
object
,它包含键值对,由于我们使用与状态变量名称相同的名称,我们可以使用该名称来更新状态值。当我们在 setState
中传递一个对象时,它会用 state
中传递的值替换 object
变量的值。就像:
state values = {x: 1, y: 2};
obj[x] = 5;
现在,当我们执行
setState
时,它将合并这两个 objects
,新的 state
值将是: {x: 5, y: 2}
检查工作代码:
class Range extends React.Component {
constructor(props) {
super(props);
};
render() {
let min = 0;
let max = 500;
let step = 1;
return (
<form>
<h4>{this.props.name}</h4>
<input
type="range"
min={min}
max={max}
step={step}
name={this.props.name}
value={this.props.value}
onChange={(e)=>this.props.change(e)}
/>
<output>
{this.props.value}
</output>
</form>
)
};
};
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
xvalue: 100,
yvalue: 300,
}
this.handleChange = this.handleChange.bind(this);
};
handleChange(e) {
let obj = {};
obj[e.target.name] = e.target.value;
this.setState(obj);
console.log(event.target.value);
};
render() {
return (
<div className="formwrap">
<Range
name = 'xvalue'
t = {'xvalue'}
value = {this.state.xvalue}
change = {this.handleChange}
/>
<Range
name = 'yvalue'
t = {'yvalue'}
value = {this.state.yvalue}
change = {this.handleChange}
/>
</div>
)
};
};
class Rect extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<div>
Rect
</div>
)
};
};
class Wrap extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Form />
<hr />
<Rect />
</div>
)
};
};
ReactDOM.render(
<Wrap />,
document.getElementById('app')
);
<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='app'>