我如何告诉onChange在更新按钮上将禁用按钮设置为true，如果this.state.title少于3个字符，我尝试了一次，但它不允许我输入值。它几乎破坏了代码。我希望将更新传递给redux。
这是我所拥有的，免责声明某些代码已被删除，以使其更加相关。
PostItem.js
import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import Editable from './Editable';
import {connect} from 'react-redux';
import {UpdatePost} from '../actions/';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
},
button:{
marginRight:'30px'
}
}
class PostItem extends Component{
constructor(props){
super(props);
this.state = {
disabled: false,
}
}
onUpdate = (id, title) => () => {
// we need the id so expres knows what post to update, and the title being that only editing the title.
if(this.props.myTitle !== null){
const creds = {
id, title
}
this.props.UpdatePost(creds);
}
}
render(){
const {title, id, removePost, createdAt, post_content, username, editForm, isEditing, editChange, myTitle, postUpdate} = this.props
return(
<div>
<Typography variant="h6" component="h3">
{/* if else teneray operator */}
{isEditing ? (
// need a way to disable update button if the value is less than 3 characters
<Editable editField={myTitle ? myTitle : title} editChange={editChange}/>
): (
<div>
{title}
</div>
)}
</Typography>
<Typography component="p">
{post_content}
<h5>
by: {username}</h5>
<Typography color="textSecondary">{moment(createdAt).calendar()}</Typography>
</Typography>
{!isEditing ? (
<Button variant="outlined" type="submit" onClick={editForm(id)}>
Edit
</Button>
):(
// pass id, and myTitle which as we remember myTitle is the new value when updating the title
// how would i set disabled to false if the value from editField is less than 3 charaters.
<Button
disabled={this.state.title.length > 3 }
variant="outlined"
onClick={this.onUpdate(id, myTitle)}>
Update
</Button>
)}
<Button
style={{marginLeft: '0.7%'}}
variant="outlined"
color="primary"
type="submit"
onClick={removePost(id)}>
Remove
</Button>
</div>
)
}
}
const mapStateToProps = (state) => ({
disabled: state.post.disabled
})
const mapDispatchToProps = (dispatch) => ({
// pass creds which can be called anything, but i just call it credentials but it should be called something more
// specific.
UpdatePost: (creds) => dispatch(UpdatePost(creds)),
// Pass id to the DeletePost functions.
});
export default connect(mapStateToProps, mapDispatchToProps)(PostItem);
editChange
PostList.js
import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import {connect} from 'react-redux';
import {DeletePost, UpdatePost,EditChange, DisableButton} from '../actions/';
import PostItem from './PostItem';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
}
}
class PostList extends Component{
constructor(props){
super(props);
this.state ={
title: ''
}
}
// Return a new function. Otherwise the DeletePost action will be dispatch each
// time the Component rerenders.
removePost = (id) => () => {
this.props.DeletePost(id);
}
onChange = (e) => {
e.preventDefault();
this.setState({
title: e.target.value
})
}
formEditing = (id) => ()=> {;
this.props.EditChange(id);
}
render(){
const {posts} = this.props;
return (
<div>
{posts.map((post, i) => (
<Paper key={post.id} style={Styles.myPaper}>
{/* {...post} prevents us from writing all of the properties out */}
<PostItem
myTitle={this.state.title}
editChange={this.onChange}
editForm={this.formEditing}
isEditing={this.props.isEditingId === post.id}
removePost={this.removePost}
{...post}
/>
</Paper>
))}
</div>
)
}
}
const mapStateToProps = (state) => ({
// disabled: state.post.disabled,
isEditingId: state.post.isEditingId
})
const mapDispatchToProps = (dispatch) => ({
// pass creds which can be called anything, but i just call it credentials but it should be called something more
// specific.
EditChange: (id) => dispatch(EditChange(id)),
UpdatePost: (creds) => dispatch(UpdatePost(creds)),
// Pass id to the DeletePost functions.
DeletePost: (id) => dispatch(DeletePost(id))
});
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
this.props.DisableButton的操作
export const DisableButton = () => {
return(dispatch) => {
dispatch({type:DISABLED});
}
}
发布禁用按钮等的减少器。
import { DISABLED} from '../actions/';
const initialState = {,
disabled: false,
isEditingId:null
}
export default (state = initialState, action) => {
switch (action.type) {
case DISABLED:
return({
...state,
disabled:true
})
default:
return state
}
}
可编辑的组件
import React from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
const Editable = (props) => (
<div>
<TextField
id="outlined-name"
label="Title"
style={{width: 560}}
name="title"
value={props.editField}
onChange={props.editChange}
margin="normal"
required
variant="outlined"/>
</div>
)
export default Editable;
答案 0 :(得分：1)
您无需调用DisableButton方法即可禁用其值。
修正您的onChange，也许大概是这样：
onChange = (e) => {
this.setState({ title: e.target.value });
}
是的，这就足够了。
现在您可以使用逻辑来禁用Button组件，如下所示：
<Button
disabled={this.state.title.length <= 3}
// rest of the attributes
/>
您不需要在redux上使用禁用的道具。没必要，因为您可以直接在title组件上使用Button的本地状态来移动逻辑。
====编辑
您需要先初始化this.state.title
constructor(props) {
super(props);
this.state = {
title: '',
}
}
===在提问者添加一些详细信息后第二次编辑
如果this.state.title在PostList（父组件）组件上，并且您的Button正在通过myTitle道具访问它，因为它在PostItem组件上。您可以这样做：
<Button
disabled={this.props.myTitle.length <= 3}
// rest of the attributes
/>