所以我从数组 'values': ["hello", "world]
成功渲染组件,但我想添加一个按钮组件,这样每次它被点击时,另一个出现空字段。这是它当前的样子:
但我希望它有一个按钮,每次我单击它时,它都会呈现另一个空组件来输入文本。直接在我的 array_node.jsx 文件中添加一个按钮组件是否正确?到目前为止我所做的是否正确?我还必须在 var AddButton = React.createClass({})
中添加某种 newInput: function()
吗?谢谢!
array_node.jsx:
{...
childChange: function(name, valid, value) {
// update state
this.state.values = this.props.values;
// Using regex to find last digits from 0-9
var pattern = /[0-9]/;
var match = name.match(pattern);
// Parse char into int
var i = parseInt(match);
this.state.values[i] = value;
this.setState(this.state);
// Call parent callback
this.props.callback(
this.props.name,
this.props.node.valid(this.state.values),
this.state.values
);
},
addItem: function(values){
},
render: function() {
var that = this;
return (
<div id = "form">
{this.props.values.map(function(v, i) {
return (
<div>
{(that.props.node.get().constructor.name === "Parent") ?
<ParentComponent
name={that.props.name + i}
key={i}
timer={that.props.timer}
callback={that.childChange}
values={v}
newParent={that.props.node.get()}
/>
:
<NodeComponent
name={that.props.name + i}
key={i}
timer={that.props.timer}
callback={that.childChange}
value={v}
newNode={that.props.node.get()}
/>
}
</div>
)
})}
</div>
)
}
});
return ArrayNodeComponent
var AddButton = React.createClass({
addItem: function() {
},
render: function() {
return(
<div id="create_new_entry">
</div>
)
}
})
格式:
var props = {
'name' : 'form',
'timer' : 1500,
'callback' : function(id, validity, value) {console.log(id, validity, value);},
'values': ["hello", "world"],
'node' : new FormatOC.ArrayNode({"__array__":"unique", "__type__":"string","__minimum__":1,"__maximum__":200,"__component__":"Input"},
)
}
React.render(React.createElement(ArrayNodeComponent, props), document.getElementById('react-component'));
最佳答案
您可以在呈现函数内将按钮添加到您的表单中。 然后听点击并向您的值列表添加一个新的空元素。
如果您想将更改传播到某些父组件,则必须从父组件传递 onClick
处理程序并更新那里的值列表。
import { Component } from 'react';
class ArrayNodeComponent extends Component {
// other code ...
// like your initialisation of your state
// and other functions
addEmptyItem() {
const { values } = this.state;
this.setState({
values: [...values, ""]
});
}
render() {
return (
<form id="test">
{
/* this is your values map routine, shortened */
this.props.values.map(function(v, i) { /*...*/ })
}
<button onClick={() => this.addEmptyItem()}>Add</button>
</form>
);
}
}
顺便说一句,在这个简单的场景中,创建自定义 Button 组件没有意义。
关于javascript - 如何在 ReactJS 中添加按钮组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50351256/