我需要渲染两个单独的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)}
/>
将事件
对象传递给父组件。使用此事件
来更新状态值。像这样:
handleChange(e) {
//let v = props.t;
let obj = {};
obj[e.target.name] = e.target.value;
this.setState(obj);
console.log(event.target.value);
};
它起作用的原因:
State是任何对象
,它包含键值对,由于我们使用与状态变量名称相同的名称,我们可以使用该名称来更新状态值。当我们在 setState
中传递一个对象时,它会用该 object
中传递的值替换 state
变量的值。就像:
状态值 = {x: 1, y: 2};
obj[x] = 5;
现在,当我们执行setState
时,它将合并这两个对象
,新的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'>
关于javascript - React 单独的实例使用单独的值调用相同的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43118977/